Преобразование изображения в холст, который уже загружен
Я работаю над плагином, в котором я конвертирую изображение в холст и сохраняю его как 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);
Ответы
Ответ 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);
Ответ 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);
});