Question

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

数据完全存储在本地存储中，但如果我尝试从函数中获取值，即返回语句，那么我得到＆＃34; undefined＆＃34;值。可能该函数在转换为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批准或运行代理服务器，使其看起来像是来自您自己的服务器。

DataURL没有返回值

1 个答案: