如何使用<input>,<img>和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