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

如何使用<input />，<img/>和canvas从本地文件系统预览一张大图片

1 个答案: