I have the following javascript function called store_data:

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

}

I have the following javascript function called store_data:

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

}

The first time the function is being called "data" in localStorage - is inplete: "data64;aotehtahotetav...". When I call the function the second time the data is stored fine. Why does it show this behavior?

Should I load the image in a IMG after DOM is fully loaded?

• javascript

Share Improve this question Follow edited Sep 3, 2024 at 6:24 mboeckle 9721313 silver badges3030 bronze badges asked Jan 28, 2013 at 21:48 fpileefpilee 2,10833 gold badges2626 silver badges4040 bronze badges 1

• Please don't use URL as a "JS global var". It is indeed a JS global variable, but with a predefined value — a built-in constructor, URL. Any code might (reasonably) expect to be able to do something like const url = new URL("http://www.example."), and will break if you assign something else to URL. Redefining URL is kind of like teaching a young child that the word for banana is "poopstick" instead. It might work in your home, but you better not take the poor kid into public. – Amadan Commented Sep 3, 2024 at 6:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Like Michael has already mentioned your code is saving the image's data to localStorage before it has pletely downloaded. The second time the image already exists in cache.

Maybe try loading the image onto the canvas when the onload event fires like so

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

}

If you don't do your data storage in img.onload, then you cannot be certain that the image's data has been entirely downloaded when you're storing it in local storage, and you will get inconsistent data lengths.