Question

我已经构建了一个拖放图像上传器。我想自动创建每个图像的缩略图。我使用的是html5画布，但是当我一次上传20个或更多的2MB图像时，浏览器（safari）会崩溃。当我离开调整大小功能时，一切正常。有关如何处理这个的任何建议？非常感谢你！

这是在每个图像上调用的resize函数：

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

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

相反，在循环外部执行`var canvas = document.createElement（'canvas'）。

这样只创建了1个canvas元素而不是很多。

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

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

1 个答案: