4

好吧，我在 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 中？图像被存储以供后期绘制使用。

4

2 回答 2

3

就像迈克尔已经提到您的代码在图像完全下载之前将图像的数据保存到 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 );
    }

}
于 2013-01-28T22:12:13.523 回答
0

如果你不做你的数据存储img.onload在本地存储，那么当你将它存储在本地存储时，你不能确定图像的数据已经完全下载，并且你会得到不一致的数据长度。

于 2013-01-28T22:03:14.987 回答