이미로드 된 캔버스로 이미지 변환

Question

이미지를 캔버스로 변환하고 데이터 URL로 저장하는 플러그인에서 작업 중입니다.이 함수는 '로드'이벤트를 트리거하지만 어떻게 이미지를 변환 할 수 있습니까? 이미 페이지에 있습니까? (페이지를 새로 고치거나 이미지를 다시로드하고 싶지는 않음). 나는 Filereader() 함수를 사용하여 시도했지만 'onload'개념에서도 작동합니다. 그렇다면 사용자가 이미지를 클릭 할 때 데이터 URL로 이미지를 저장하려면 어떻게해야합니까?

Answer 1

는 이제 작동합니다. 이것은 나를 위해 일했다 그것은 다른 사람들을 도울 수 있기를 바란다.

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을 저장할 수 있습니다. 그런 다음 로컬 스토리지에 저장 자바 스크립트를 사용하여 임시 이미지 요소를 만들 perfectly.If

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