Javascript 从输入缩放图像[类型=文件]

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

问题：下面的代码完全符合我的要求，但是，我必须选择文件，而不是一次，而是两次才能看到图像预览。（选择图像，不显示，选择相同的图像，我得到缩放显示）当我手动分配宽度和高度时，一切都很好，尽管现在我正在缩放它-这个问题开始了。我需要一个代码检查！当我注释掉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 <= max_size) {
                        var ratio = 1;
                    } else if (width > 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('<a class="btn btn-app" href="#"><span class="vl vl-bell-o"></span> Unsupported File</a>');
                break;
        }
    };
    preview(file);
};

previewFiles=函数（文件，i）{
预览=函数（文件）{
//确保'file.name'符合我们的扩展标准
开关（/\（jpe？g | png | gif）$/i.test（file.name））{
大小写正确：
var reader=new FileReader（）；
reader.onload=函数（e）{
var img=新图像（）；
img.src=reader.result；
变量宽度=img.width，
高度=最小高度，
最大尺寸=75；
如果（width我制作了这个片段来获取一个图像，那么将它缩略并导出为img元素


//将图像最大大小限制为150x100
var-maxW=150；
var maxH=100；
var input=document.getElementById（'input'）；
input.addEventListener（'change'，HandleFile）；
功能手柄（e）{
var img=新图像；
img.onload=函数（）{
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var iw=img.宽度；
var ih=img.高度；
变量标度=数学最小值（（maxW/iw），（maxH/ih））；
var iw标度=iw*标度；
var ih标度=ih*标度；
canvas.width=iwScaled；
canvas.height=ihScaled；
ctx.drawImage（img，0,0，iw缩放，ih缩放）；
var thumb=新图像（）；
thumb.src=canvas.toDataURL（）；
document.body.appendChild（拇指）；
}
img.src=URL.createObjectURL（e.target.files[0]）；
}
body{背景色：象牙；}

选择要从中创建缩略图的文件

Hi。我从来没有广泛使用过FileReader。我觉得有些奇怪，如果我错了，请原谅我。在这一行-
img.src=reader.result；
如何从
reader.result
获取文件路径？什么时候
reader.result
分配了路径？reader.result是文件读取器api的属性。我相信它是分配的当调用new FileReader时。我想它也可以很容易地被标记为e.target.result可能会对您有所帮助。这是很好的工作！感谢您的共享。当我使用您的示例实现画布时，它会给我一个空画布，数据url显示数据：，当我第一次选择图像时。在第二次选择时，我看到图像。Essentially我也遇到了同样的问题！我将尝试将缩放放在一个单独的函数中，并在预览（）中调用它方法，看看我是否有更好的运气。快速更新-今天下午早些时候，借助Mihir发布的文章和您的答案markE，我能够解决问题-非常感谢您的回复！您应该记得在加载图像后调用URL.revokeObjectURL。无需将其保留在内存中，并且可能导致内存泄漏。