subir - javascript mostrar imagen

Convierta una imagen en lienzo que ya está cargado

Question

Estoy trabajando en un complemento en el que estoy convirtiendo Image into Canvas y almacenando como url de datos. Esta función se desencadena en el evento ''load'' pero ¿cómo puedo convertir una imagen que ya está allí en la página? (No desea actualizar la página ni cargar ninguna imagen de nuevo). Intenté usar la función Filereader (), pero eso también funciona en el concepto ''onload''. Entonces, ¿cómo puedo guardar la imagen como url de datos cuando el usuario hace clic en la imagen?

   image.addEventListener("load", function () {

         var imgCanvas = document.createElement("canvas"),
            imgContext = imgCanvas.getContext("2d");
            imgCanvas.width = image.width;
            imgCanvas.height = image.height;

            imgContext.drawImage(image, 0, 0, image.width, image.height);       
            imgInfo = imgCanvas.toDataURL("image/png");

            localStorage.setItem("imgInfo", imgInfo);
        }, false);

Answer 1

Puede enlazar click listener a la imagen y guardar data-url al hacer clic.

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

Answer 2

Ahora funciona perfectamente. Si crea un elemento de imagen temporal usando javascript, guárdelo en localStorage. Esto funcionó para mí espero que ayude a otros también

    image = document.createElement(''img'');
    document.body.appendChild(image);
    image.setAttribute(''style'',''display:none'');
    image.setAttribute(''alt'',''script div'');
    image.setAttribute("src", path);

    var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

    // Make sure canvas is as big as the picture
    imgCanvas.width = image.width;
    imgCanvas.height = image.height;

    // Draw image into canvas element
    imgContext.drawImage(image, 0, 0, image.width, image.height);
    // Save image as a data URL
    imgInfom = imgCanvas.toDataURL("image/png");
    localStorage.setItem("imgInfo",imgInfom);
    document.body.removeChild(image);