javascript - 将 base64 存储在本地存储中

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);

}

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

也许我应该在加载的 dom 的 img 中加载图像？存储图像以供后期绘制使用。

Answer 1

正如 Michael 已经提到的，您的代码在图像完全下载之前将图像数据保存到 localStorage。第二次图像已存在于缓存中。

也许像这样在 onload 事件触发时尝试将图像加载到 Canvas 上

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 );
    }

}