DataURL 不返回值答案

【问题标题】：DataURL not returning valueDataURL 不返回值
【发布时间】：2013-05-13 05:50:05
【问题描述】：

我创建了一个将图像的 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;

}

【问题讨论】：

标签： javascript html html5-canvas local-storage data-uri

【解决方案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 的页面不同）绘制图像，它将“污染”画布，并且您不再能够使用 toDataURL 访问图像数据。

要绕过这一点，您要么需要让远程服务器实施 CORS 批准，要么运行代理服务器，以便看起来图像来自您自己的服务器。

【讨论】：