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

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

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

由于

Answer 1

您的代码（缩写）如下所示：

function getDataUrl() {
    dataURL = '';  

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

    return dataURL;
}

除了将函数分配给img.load = function之外，img.load做什么都不是，执行将继续使用return语句，这意味着你的dataURL变量保留原始价值您应该意识到Javascript中的函数可以像字符串或数字一样分配给变量。它不需要执行它可能有点混乱，它肯定与许多其他语言不同，但你会得到它的悬念。一定要继续阅读＆amp;了解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中相当常见的模式。

Answer 2

load事件是异步的。这意味着它会在您的getDataURL()功能完成后的某个时间发生。因此，您无法从getDataURL()函数返回所需的值，因为尚未加载图像并且尚未调用加载事件处理程序。所以，相反，你需要异步思考并以一种处理它的方式编程。这样做的典型方法是传入一个回调函数，该函数将在数据可用时被调用，并且您可以将该数据传递给回调函数。

有许多不同的方法来编码，但这是一种方式：

function getDataUrl( file, callback ){
    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");
        // pass the dataURL to the callback function
        callback(dataURL);
    };

    img.src = url;
}

getDataUrl("myfile.jpg", function(dataURL) {
    // code here to use the dataURL        
});

获取内部加载功能的变量

2 个答案: