DataURL不返回值

Question

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

数据完全存储在本地存储中，但如果我尝试从函数获取值（即返回语句），则会得到“未定义”值。 也许，即使转换为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页面不同）绘制图像，将会“画”画布，并且不再能够使用toDataURL访问图像数据。

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