Javascript图片 - 上传前调整大小

Question

我试图在客户端上调整大/大图像的大小并上传较小的图像。这与一个或十个图像完美配合。但我想上传mybe 50+图像。这将工作，但它会减慢我的CPU和内存。调整大小的图像的代码是：

        var MAX_WIDTH = 1920;
    var MAX_HEIGHT = 1920;
    var loaded = 0;
    var URL = window.URL || window.webkitURL;


    function loadImage(file) {
        var mime = file.type;
        var src = URL.createObjectURL(file);

       var img = new Image();

        img.onload = (function (image) {
            return function () {
                var newHeight = MAX_WIDTH;
                var newWidth = MAX_HEIGHT;


                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = newWidth;
                canvas.height = newHeight;



                ctx.drawImage(image, 0, 0, this.width, this.height, 0, 0, newWidth, newHeight);
                URL.revokeObjectURL(this.src);


                var dataURI = canvas.toDataURL(mime);
                var blob = dataURLToBlob(dataURI);
                imagesToUpload.push(blob);

                loaded++;
                if (loaded < checkedFiles.length) {
                    loadImage(checkedFiles[loaded]);
                } else {
                    //DO UPLOAD
                    input.value = "";
                }
            }
        })(img);
        img.src = src;
        image = null;

    }


    loadImage(checkedFiles[0]);

在调整大小和上传时，我想显示加载动画。这种反应非常缓慢。

我认为问题在于调整canvas-object上的图像大小，但我不知道解决这个问题。

MAX-PICTURE-WITH为1920px，MAX-PICTURE-HEIGHT为1920px。

如果有人能给我一些线索，那会很棒吗？