javascript - 在加载函数中获取变量

Question

我知道这个问题可能已经回答了很多次，但我不知道要搜索哪些词才能找到答案。那么问题来了。

我正在使用 javascript 并且我有

function getDataUrl( file ){
    var url = URL.createObjectURL( file ),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext("2d"),
    img = new Image,
    dataURL = '';

    img.load = function(){
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL("image/jpeg");
    };

    img.src = url;
    return dataURL;
}

然后在输入中我有这个，

$('#file-input').on('change', function(e){
    var dataUrl = getDataUrl( e.target.files[0] );
    console.log( dataUrl );
});

但它返回空字符串(初始字符串)。我想要加载内部已经生成的 base64 数据。

我试过这样的事情

function getDataUrl( file ){
//... codes

    img.load = function(){
        //... codes
        dataURL = canvas.toDataURL("image/jpeg");
        return dataUrl;
    };
}

但当然不能，因为它返回到加载函数而不是它的父函数。

如何在加载函数中获取 dataUrl 值？

谢谢

Answer 1

您的代码(缩写)如下所示:

function getDataUrl() {
    dataURL = '';  

    img.load = function() {
        dataURL = 'Hello!';
    };

    return dataURL;
}

img.load = function 所做的只是除了将函数分配给 img.load，然后执行将继续return 语句，这意味着您的 dataURL 变量保留原始值。
您应该意识到 Javascript van 中的函数可以像字符串或数字一样分配给变量。它不需要被执行。
它可能有点令人困惑，它肯定与许多其他语言不同，但您会掌握它的窍门。请务必继续阅读和学习 javascript。

您可能想使用 img.onload，这将在图像加载完成时执行该函数。但这可以是任何时候，可能是 1 秒，可能是 10 秒，也可能永远不会。

你需要做的是:

$('#file-input').on('change', function(e) {
    getDataUrl(e.target.files[0], function(dataUrl) {
        console.log(dataUrl);
    });
});

function getDataUrl(callback) {
    dataURL = '';  

    img.onload = function() {
        callback(dataUrl);
    };

    return dataURL;
}

这里你传递一个函数作为参数，一旦图像完成加载就执行该函数，将 dataUrl 作为参数传递。这是 Javascript 中相当常见的模式。