将图像转换为已加载的canvas

我正在开发一个插件，我将Image转换为Canvas并存储为数据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

您可以将单击侦听器绑定到图像，并在单击时保存data-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); });