将图像转换到画布已经加载 [英] Convert an image to canvas that is already loaded

问题描述

我工作的一个插件中，我转换成图像帆布和存储数据的URL，'负荷'事件。这功能触发，但我怎么可以将图像转换这已经是那里的网页上？ （不想刷新页面或再次加载任何图像）。我尝试使用的FileReader（）函数，但也适用于'onload事件'的概念。所以，我怎么能保存图像数据的网址，当用户点击了图片的？

  image.addEventListener（负荷，函数（）{         VAR imgCanvas =使用document.createElement（帆布），
            imgContext = imgCanvas.getContext（2D）;
            imgCanvas.width = image.width;
            imgCanvas.height = image.height;            imgContext.drawImage（图像，0，0，image.width，image.height）;
            imgInfo = imgCanvas.toDataURL（图像/ PNG）;            localStorage.setItem（imgInfo，imgInfo）;
        }，FALSE）;
 

解决方案

现在它perfectly.If创建使用JavaScript，然后将其存储在localStorage的一个临时的图像元素的作品。这个工作对我希望它会帮助别人太

 图像=使用document.createElement（'IMG'）;
    document.body.appendChild（图片）;
    image.setAttribute（'风格'，'显示：无'）;
    image.setAttribute（ALT，脚本DIV'）;
    image.setAttribute（src用户，路径）;    VAR imgCanvas =使用document.createElement（帆布），
    imgContext = imgCanvas.getContext（2D）;    //确保画布一样大的图片
    imgCanvas.width = image.width;
    imgCanvas.height = image.height;    //绘制图像到画布元素
    imgContext.drawImage（图像，0，0，image.width，image.height）;
    //保存图像作为数据网址
    imgInfom = imgCanvas.toDataURL（图像/ PNG）;
    localStorage.setItem（imgInfo，imgInfom）;
    document.body.removeChild（图片）;
 

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

解决方案

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

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

这篇关于将图像转换到画布已经加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！