2014-11-09 2 views
1

나는 Html5 캔버스 작업을하고 있습니다.클릭 동작시 Html5 캔버스 다운로드

은 현재 내가

지금 내가 다운로드를 저장하고 이미지로 캔버스를 다운로드 할 수 버튼을 포함 할 이미지 저장 마우스 오른쪽 버튼으로 클릭에 이미지를 다운로드하고 의 옵션을 선택하고있다.

내 코드는 다음과 같습니다

var download = document.getElementById('img-download'); 
    download.addEventListener('click', prepareDownload, false); 

    function prepareDownload() { 

    var canvas = document.getElementById("memecanvas"); 
    document.getElementById("memecanvas").src = canvas.toDataURL(); 

    Canvas2Image.saveAsPNG(canvas); 
    } 

이것은 단순히 마우스 오른쪽 버튼으로 클릭을 통해 다운로드 할 수 있습니다. 버튼 클릭 동작에서이 문제를 처리하는 방법을 알려주십시오. 사전에

감사합니다!

+1

Eli Gray는 html5 캔버스를 이벤트와 함께 디스크에 저장해야하는 Blob을 구현하지 않는 브라우저를 위해 멋진 shim을 만들었습니다. https://github.com/eligrey/FileSaver.js – markE

답변

0

그냥 버튼을 만들고 "다운로드 버튼"이라고 말하면됩니다.

그런 다음 img-download 요소에 click 이벤트 처리기를 추가하는 대신 해당 이벤트 ID를 사용하여 단추에 할당하십시오.