如何使用 img.onload 返回函数？

Question

我目前正在构建一个应用程序，用户可以在其中上传多张图像并同时使用它们。由于图像文件过大，某些进程执行效果不佳，因此我想在用户获取它们之前调整它们的大小。

在我的resizer() 函数中，我尝试使用画布调整大小。它可以工作，但由于 'canvas.toDataURL()' 在 img.onload 函数内，我不知道如何返回值并将其解析到 handleFiles() 函数。

另外...我尝试了一些从handleFiles() 获得一些代码的情况 - 比如：

var preview = document.getElementById("img"+count);
var surface = document.getElementById("cubface"+count);
var count = counterImg();
preview.src =  resizer(e.target.result, count);
surface.src = resizer(e.target.result, count);

并将它们放在img.onload函数的末尾

var preview = document.getElementById("img"+number);
var surface = document.getElementById("cubface"+number);
preview.src = canvas.toDataURL;
surface.src = canvas.toDataURL;

我得到了调整大小，但我只得到了循环中要处理的最后一张图像。

所以问题是：

1. 在resizer()函数中，如何返回img.onload中的canvas.toDataURL值？

2. 为什么循环只覆盖最后一个实例而不是每个图像以及如何解决这个问题？

完整代码：

JavaScript：

function resizer(base64, number){

    // Max size for thumbnail
    if(typeof(maxWidth) === 'undefined')  maxWidth = 1200;
    if(typeof(maxHeight) === 'undefined')  maxHeight = 1200;

    var img = new Image();
    img.src = base64;

    // Create and initialize two canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function() {

        // Determine new ratio based on max size
        var ratio = 1;
        if (img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if (img.height > maxHeight)
            ratio = maxHeight / img.height;

        // Draw original image in second canvas
        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        // Copy and resize second canvas to first canvas
        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

        return canvas.toDataURL();

    };

    return img.onload;

}


function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var count = counterImg();
        var preview = document.getElementById("img"+count);
        var surface = document.getElementById("cubface"+count);

        var reader = new FileReader();
        reader.onload =  (function (preview, surface) {
            return function (e) {
                var newimage = resizer(e.target.result, count);
                preview.src =  newimage;
                surface.src = newimage;
                $('#image-cropper'+count).cropit('imageSrc', e.target.result);
            }
        })(preview, surface);
        reader.readAsDataURL(file);
    }
}

Answer 1

变量计数的范围不正确。

在声明函数和使用它的时间之间存在延迟，因此，每次执行都以相同的值结束。因此 jquery 选择器将始终返回相同的元素。这就解释了为什么只修改最后一张图片。

这是一个演示执行的 jsfiddle。

https://jsfiddle.net/Lc6bngv5/1/

要解决这个问题，只需将 count 传递给封装预览和表面的函数：

    reader.onload =  (function (preview, surface, count) {
        return function (e) {
            var newimage = resizer(e.target.result, count);
            preview.src =  newimage;
            surface.src = newimage;
            $('#image-cropper'+count).cropit('imageSrc', e.target.result);
        }
    })(preview, surface, count);

第二个问题：

resize 函数返回一个函数。它不返回该函数的结果。为了正确获取 url，我会使用回调函数：

reader.onload =  (function (preview, surface, count) {
    return function (e) {
        var newimage = resizer(e.target.result, count, function(url){
            preview.src =  url;
            surface.src = url;
            $('#image-cropper'+count).cropit('imageSrc', e.target.result);
        });
    }
})(preview, surface, count);

您必须在调整大小时进行以下更改：

function resizer(base64, number, cb){
    ...
    img.onload = function() {
        ...
        // return canvas.toDataURL();
        cb(canvas.toDataURL());
    };
}