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

Question

我当前正在构建一个应用程序，用户可以在其中上载多个图像并同时使用它们。 由于某些过程由于图像文件过大而导致效果不佳，因此我想在用户获得它们之前调整它们的大小。

在我的resizer()函数中，我尝试使用画布来调整大小。 它可以工作，但是由于“ canvas.toDataURL（）”位于img.onload函数内部，因此我不知道如何返回该值并将其解析为handleFiles()函数。

另外...我尝试了一些从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()函数，如何返回canvas.toDataURL值，它是在img.onload ？

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传递给封装预览和Surface的函数：

    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());
    };
}