如何使用 <input>、<image> 和 canvas 从本地文件系统预览一张大图

Question

我正在尝试在手机上制作一个上传图片的网页，但是一旦图片太大，它总是会耗尽内存并且浏览器会退出。 这是我的代码：

<input type="file" id="testFile" />
<img src="" style="position:relative;" id="uploadingImg" />

function setImage() {
    var fileList   = this.files;
    var imageType  = /image/;
    for(var i = 0;i < fileList.length;i++) {
        document.getElementById('uploadingImg').file = fileList[i];
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('uploadingImg').src = e.target.result;
        }
        reader.readAsDataURL(fileList[i]);
    }
}



document.getElementById('testFile').addEventListener('change', setImage, false);

有谁知道如何使用<img> 或<canvas> 元素预览一张图片？ 请不要使用"readAsDataURL"，因为当涉及到document.getElementById('uploadingImg').src = e.target.result; 它将耗尽内存。因为base64的Url占用内存太多，内存中存在很多三四份。

如何通过画布使用"readAsArrayBuffer" 和"drawImage"？ 还是其他方法？

如果我不使用"readAsDataUrl"可以在本地磁盘中预览一张图片，一切都可以。

谢谢！

Answer 1

在大多数浏览器中，您不需要为此使用FileReader（因此也不需要使用readAsDataUrl）。相反，您可以使用 File API 的 createObjectURL 方法。这是您重写的setImage() 函数：

function setImage() {
    var file = this.files[0];
    var URL = window.URL || window.webkitURL;
    if (URL.createObjectURL && (file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif")) {
        document.getElementById('uploadingImg').src = URL.createObjectURL(file);
    } else {
        alert('Unable to show preview');
    }
}

不过，浏览器支持仍然有些不完善，因此请在决定是否使用之前检查支持表，例如 caniuse.com： http://caniuse.com/#search=createobjectURL