多个图像用画布调整大小

Question

我已经构建了一个拖放图像上传器。我想自动创建每个图像的缩略图。我使用了HTML5帆布，但是当我一次上传20个或更多2MB图像时，浏览器（Safari）崩溃了。当我删除调整大小功能时，一切正常。关于如何处理这个问题有什么建议吗？非常感谢！

这是每个图像上调用的调整大小函数：

if(this.hasFileReader){
    var reader = new FileReader();
    reader.readAsDataURL(this.file);
    var file = this.file;
    reader.onloadend = function(e){
        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function() {
            var MAX_WIDTH = 348;
            var MAX_HEIGHT = 300;
            var tempW = tempImg.width;
            var tempH = tempImg.height;
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                   tempH *= MAX_WIDTH / tempW;
                   tempW = MAX_WIDTH;
                }
            } else {
                if (tempH > MAX_HEIGHT) {
                   tempW *= MAX_HEIGHT / tempH;
                   tempH = MAX_HEIGHT;
                }
            }
            var canvas = document.createElement('canvas');
            canvas.width = tempW;
            canvas.height = tempH;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH);
            var dataURL = canvas.toDataURL("image/jpeg");
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'uploadResized.php', true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            var data = 'image=' + dataURL + '&name=' + file.name + '&type=' + file.type;
            xhr.send(data);
        }
}

Answer 1

您正在为批处理中的每个图像创建一个新的画布元素，而画布很昂贵。

相反，do`var canvas = document.createelement（'canvas'）一旦在循环外。

这样，只创建了1个画布元素而不是许多。

顺便说一句，当您进行canvas.width = tempw内部的tempw时，您的画布会自动清除，因此您无需添加clear rect。