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

Question

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

在我的 resizer() 函数中，我尝试使用 Canvas 调整大小。它可以工作，但由于“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);

对于第二个问题:

调整大小函数返回一个函数。它不返回该函数的结果。为了正确获取 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());
    };
}