点击操作下载 Html5 画布答案

【问题标题】：Download Html5 canvas on click action点击操作下载 Html5 画布
【发布时间】：2015-01-06 00:14:53
【问题描述】：

我正在开发 Html5 画布。

目前我正在右键单击下载图像并选择保存图像

选项

现在我想包含 DOWNLOAD 按钮，该按钮可以将 Canvas 保存和下载为图像。

我的代码是：

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

这只是通过右键单击来下载它。请帮助我如何处理按钮单击操作。

提前致谢！

【问题讨论】：

Eli Gray 为没有实现 Blob 的浏览器创建了一个不错的 shim，这是通过事件将 html5 画布保存到磁盘所需的：github.com/eligrey/FileSaver.js

标签： javascript html canvas html5-canvas buttonclick

【解决方案1】：

只需创建一个按钮，给它一个 ID，比如“下载按钮”。

然后，不要将 click 事件处理程序添加到 img-download 元素，而是使用它的 ID 将其分配给按钮。

【讨论】：