javascript - 从输入缩放图像[type=file]

Question

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

问题:以下代码完全符合我的要求，但是，我必须选择文件而不是一次，而是两次才能查看图像预览。 (选择图像，不显示，选择相同的图像，我得到缩放的显示)当我手动分配宽度和高度时，一切都工作得很好，尽管现在我正在缩放它 - 这个问题开始了。我需要进行代码审查!当我注释掉 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);
};

我稍微改变了缩放比例 - 尝试过 https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/遵循这篇文章，我也有同样的问题。问题是因为我没有使用 Canvas 吗？我对 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select a file to create a thumbnail from</h4>
<input type="file" id="input"/>
<br>