Loading dataURL from Local Storage into HTML Canvas

Question

I'm having a bit of trouble loading a dataURL into my canvas from local storage.

localStorage.getItem(canvasArea)

I've managed to save the dataURL into local storage and when I console.log it out I can view it:

I managed to save it by using this code:

document.getElementById("saveButton").addEventListener("click", function()
{  
   var canvas = document.getElementById("canvasArea"),
   ctx = canvas.getContext("2d");

   localStorage.setItem(canvasArea, canvas.toDataURL());
})

However when I try and place that dataURL using the code below it doesn't do anything.

function loadCanvas(dataURL) {

    var canvas = document.getElementById('canvasArea');
    var ctx = canvas.getContext('2d');


    var imageObj = new Image();
    imageObj.src = dataURL;
    imageObj.onload = function() {
      ctx.drawImage(this, 0, 0);
    };  
}

var dataURL = localStorage.getItem(canvasArea);
loadCanvas(dataURL);

Am I missing something obvious or am I being stupid? Any help would be appreciated! Thanks!

`localStorage.getItem(canvasArea);` - this code refers to undefined variable `canvasArea` which is casted to empty string (`''`) — hindmost, Dec 15 '15 at 12:38
You should probably use quotes around the keys, as they should be strings ? — adeneo, Dec 15 '15 at 12:39
@hindmost, actually, since `"canvasArea"` is the `id` of OP's canvas Element, `canvasArea` is not undefined, but equivalent to `document.getElementById('canvasArea') || document.getElementsByName('canvasArea')[0];` which, once passed into the `setItem()` and `getItem()` methods, will be converted to its string notation : `"[object HTMLCanvasElement]"`. So, even if it is certainly not what OP was trying to do, it will work... Now, for the actual issue, I'm guessing there are some other oddities into OP's code that we don't see here. — Kaiido, Dec 15 '15 at 13:01
@Hopeless, could you post a [fiddle](http://jsfiddle.net) which reproduces the issue ? — Kaiido, Dec 15 '15 at 13:03
@Kaiido Frankly I can't understand what you wrote about. Do you really mean that any undefined identifier usage should result to `document.getElementById()` call? Then when does [Reference Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) occur? — hindmost, Dec 15 '15 at 13:19
@Kaiido Weirdly it works on [fiddle](http://jsfiddle.net/ezzbckjp/) so must be something dodgy on my end :( i'll have to take a deeper look — Hopeless, Dec 15 '15 at 13:21
@Kaiido Maybe. Although I think that's not cross-browser behaviour. At least I don't see such in my Firefox (get ReferenceError instead). — hindmost, Dec 15 '15 at 13:48
http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables — Kaiido, Dec 15 '15 at 14:41

score 0 · Answer 1 · edited Dec 15 '15 at 14:07

0

Do console.log on localStorage.getItem(canvasArea) and see exactly what it's getting. I've had weird issues like that before where it wanted loadCanvas(""+ dataURL); instead of loadCanvas(dataURL);

edited Dec 15 '15 at 14:07

Manos Nikolaidis

21,608
12
74
82

answered Dec 15 '15 at 12:38

M.James

21
6

It returned: data:image/png;base64,iVBORw0KGgoAAAA and so on, which when clicked it showed the image that I saved, the green one – Hopeless Dec 15 '15 at 12:44
In your function loadCanvas, hardcode the image URL instead of taking it as a parameter and see if it works. If it does you'll know there's an issue with the URL, it will narrow it down – M.James Dec 15 '15 at 12:51
I just tried var imageObj = new Image(); imageObj.src = "http://i.imgur.com/nXjDbCM.jpg"; imageObj.onload = function() { ctx.drawImage(this, 0, 0); }; but no change – Hopeless Dec 15 '15 at 12:54
Why not just append to the image to the container instead? – M.James Dec 15 '15 at 13:06

Loading dataURL from Local Storage into HTML Canvas

1 Answers1