Question

我在javascript中有一个函数：

function store_data(){
var img=document.createElement("img"); 
/*var img=new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
};*/
img.src= URL; //js global var
var height=parseInt(img.naturalHeight,10);
var width=parseInt(img.naturalWidth,10);
var canvas = document.getElementById('myCanvas'); 
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);

var context = canvas.getContext('2d');
context.drawImage(img,0,0);
canvas.style.width="100%"; 
var data=(canvas.toDataURL("image/png"));
localStorage.setItem("data", data);

}

第一次调用时会存储一个像“data”这样的字符串在localStorage中，图像就像是“data64; aotehtahotetav ......”。但是当我第二次打电话时，数据存储得很好。为什么会这样？

也许我应该在加载dom的img中加载图像？存储图像以便在晚期使用。

Answer 1

就像迈克尔已经提到过你的代码在完全下载之前将图像的数据保存到localStorage。第二次图像已存在于缓存中。

当onload事件像这样触发时，尝试将图像加载到画布上

function store_data() {

    var img = new Image();
    img.src =  URL; //js global var

    img.onload = function( ) {

        var canvas  =  document.getElementById( 'myCanvas' ); 
        canvas.setAttribute( "width", img.width );
        canvas.setAttribute( "height", img.height );

        var context  =  canvas.getContext( '2d' );
        context.drawImage( img, 0, 0 );
        canvas.style.width = "100%"; 
        var data = canvas.toDataURL("image/png");
        localStorage.setItem( "data", data );
    }

}

Answer 2

如果您不在img.onload中进行数据存储，那么当您将图像存储在本地存储中时，无法确定图像的数据是否已完全下载，并且您将获得不一致的数据长度。

将base64存储在localstorage中

2 个答案: