javascript 将图像转换为已经加载的画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26212792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert an image to canvas that is already loaded
提问by Ajeet Lakhani
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 already there on the page? (Don't want to refresh the page or load any image again). I tried using the Filereader() function but that also works on 'onload' concept. So how can I save the image as data url when the user clicks on the image?
我正在开发一个插件，在该插件中我将 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);
回答by Ajeet Lakhani
Now it works perfectly.If you create a temporary image element using javascript then store it in localStorage. This worked for me hope it'll help others too
现在它可以完美运行。如果您使用 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);
回答by Gilsha
You can bind click listener to the image and save data-url on click.
您可以将单击侦听器绑定到图像并在单击时保存 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);
});
