javascript - DataURL 不返回值

Question

我创建了一个将图像的 DataURI 存储在本地存储中的函数。

数据完美地存储在本地存储中，但如果我尝试从函数(即 return 语句)中获取值，则会得到“未定义”值。可能该函数甚至在转换为 dataURL 之前就返回了值。

需要你的帮助。

这是我的代码:

function getImageDataURL(local_name,w,h,i){    
var data, canvas, ctx;
var img = new Image();
img.onload = function(){      
    canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,w,h);
    try{
        data = canvas.toDataURL("image/png");
        localStorage.setItem(local_name,data);
    }catch(e){
        console.log("error "+e)
    }
}
try{
    img.src = i;
}catch(e){}
return data;

Answer 1

问题是您正在获取一个异步值并试图同步返回它。 img.onload 在函数返回后被调用。 JavaScript 中的一个常见模式是将函数传递给另一个函数以在其完成时调用:

function getImageDataURL(local_name, w, h, i, callback) {    
    var data, canvas, ctx;
    var img = new Image();
    img.onload = function (){      
        canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        ctx = canvas.getContext("2d");
        ctx.drawImage(img,0,0,w,h);

        callback(canvas.toDataURL("image/png"));
    }
    img.src = i;
}

getImageDataURL('image', 100, 100, 'image.png', function (data) {
    localStorage.setItem(local_name, data);
    console.log(data);
});

您可能会遇到的一个问题是跨域安全功能。如果您从外部域(即与使用 JavaScript 的页面不同的域)绘制图像，它将“污染” Canvas ，您将无法再使用 toDataURL< 访问图像数据.

要绕过此问题，您需要让远程服务器实现 CORS 批准或运行代理服务器，使图像看起来像是来自您自己的服务器。