从输入缩放图像

期望的结果：我想从文件上传表单中选择一个图像，将其缩放到缩略图并显示它。

问题：以下代码完全符合我的要求，但是，我必须选择文件不是一次，而是选择两次以查看图像预览。 （选择图像，没有显示，选择相同的图像，我得到缩放的显示）当我手动分配宽度和高度时，一切都很好，虽然现在我正在缩放它 – 这个问题开始了。 我需要进行代码审查！ 当我注释掉if / if else / else语句并手动分配img.width和img.height为75时，我得到了显示，虽然它当然没有缩放。

previewFiles = function (file, i) { preview = function (file) { // Make sure `file.name` matches our extensions criteria switch (/\.(jpe?g|png|gif)$/i.test(file.name)) { case true: var reader = new FileReader(); reader.onload = function (e) { var img = new Image(); img.src = reader.result; var width = img.width, height = img.height, max_size = 75; if (width <= max_size && height  height) { var ratio = max_size / width; } else { var ratio = max_size / height; } img.width = Math.round(width * ratio); img.height = Math.round(height * ratio); img.title = file.type; $('div.box.box-primary').find('span.prev').eq(i).append(img); }; reader.readAsDataURL(file); break; default: $('div.box.box-primary').find('span.prev').eq(i).append(' Unsupported File'); break; } }; preview(file); }; 

我已经稍微改变了扩展 – 尝试了https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/，这篇文章和我有同样的问题。 这个问题是因为我没有使用canvas吗？ 我很新w / jQuery和javascript – 非常感谢任何帮助！

Answer 1

我创建了一个获取图像的片段，缩略图并将其作为img元素导出。

 // limit the image to 150x100 maximum size var maxW=150; var maxH=100; var input = document.getElementById('input'); input.addEventListener('change', handleFiles); function handleFiles(e) { var img = new Image; img.onload = function() { var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); var iw=img.width; var ih=img.height; var scale=Math.min((maxW/iw),(maxH/ih)); var iwScaled=iw*scale; var ihScaled=ih*scale; canvas.width=iwScaled; canvas.height=ihScaled; ctx.drawImage(img,0,0,iwScaled,ihScaled); var thumb=new Image(); thumb.src=canvas.toDataURL(); document.body.appendChild(thumb); } img.src = URL.createObjectURL(e.target.files[0]); } 

 body{ background-color: ivory; } 

  
Select a file to create a thumbnail from