点击动作下载HTML5 Canvas

Question

I am working on Html5 canvas.

Currently I am downloading image on right click and selecting an option of save image

Now i want to include DOWNLOAD button that can save and downloads the Canvas as an Image.

My code is :

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

This simply enables to download it via right click. Please help me how to deal with this on Button click action.

Thanks in advance!

Answer 1

Just create a button, give it an ID of, say, "download-button".

Then instead of adding the click event handler to the img-download element, assign it to the button using it's ID.