将base64存储在本地存储中

Question

我有以下名为 store_data 的 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 中调用该函数的“data” - 不完整：“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

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