将图像转换为已加载的画布

Question

我正在处理一个插件，其中我将图像转换为画布并存储为数据url。该函数触发'load'事件，但是如何将图像转换为已经在网页上？ （不想刷新页面或再次加载任何图像）。我尝试使用Filereader（）函数，但也可用于'onload'概念。那么当用户点击图像时，如何将图像保存为数据url？

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

现在它完美地工作了。如果您使用JavaScript创建临时图像元素，然后将其存储在localStorage中。这对我工作希望它也会帮助其他人

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

Answer 2

您可以将点击侦听器绑定到图像上并单击保存数据URL。

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