Convert an image to canvas that is already loaded

Question

I am working on a plugin in which I\'m converting Image into Canvas and storing as data url .This function triggers on \'load\' event but how can I convert an image which is

Answer 1

You can bind click listener to the image and save data-url on click.

var img = document.getElementById("image");
img.addEventListener("click",function(){
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    ctx.canvas.width  = img.getAttribute("width");
    ctx.canvas.height = img.getAttribute("height");
    ctx.drawImage(img,0,0);
    var imgInfo = c.toDataURL("image/png");
    localStorage.setItem("imgInfo", imgInfo);
});