使用画布调整多个图像大小答案

【问题标题】：Multiple image resize with canvas使用画布调整多个图像大小
【发布时间】：2014-02-27 05:22:36
【问题描述】：

我已经构建了一个拖放图像上传器。我想自动创建每个图像的缩略图。我使用了 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);
        }
}

【问题讨论】：

如果，当你有很多图像时，你链接处理而不是“一次”完成它们，你应该没问题。只需处理文件的 FIFO 堆栈（在数组上使用 push() 和 shift()）。

标签： javascript html5-canvas

【解决方案1】：

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

相反，在循环外执行一次 `var canvas=document.createElement('canvas')。

这样只会创建 1 个画布元素而不是很多。

顺便说一句，当您在循环中执行 canvas.width=tempW 时，您的画布会自动清除，因此您无需添加 clearRect。

【讨论】：

谢谢！完美运行