如何下载 HTML5 画布上的图像？答案

【问题标题】：How to download a image that's on HTML5 canvas?如何下载 HTML5 画布上的图像？
【发布时间】：2016-03-31 23:13:16
【问题描述】：

我编写了这个 webRTC 应用程序，它可以拍摄添加了不同滤镜的照片。当我点击点击按钮时，来自 webRTC 视频源的帧被加载到右侧的画布上。

HTML 代码 -

<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="change()">Change Filter</button>
<button id="btn3" onclick="snap()" ng-click="random()">Click</button>

我写的添加滤镜后将图片捕捉到画布上的函数如下

function snap() 
    {
    canvas.className = '';
    if (findex != 0)
    canvas.classList.add(filters[findex]);
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    }

点击照片后，如何允许用户使用过滤器将图像从画布下载到计算机上？

【问题讨论】：

您可以通过在canvas 元素上使用.toDataURL() 方法，使用a 标记来执行此操作。这是一个例子（不是我的）：jsfiddle.net/AbdiasSoftware/7PRNN
@SpencerWieczorek 应用效果后，它不允许我从画布上下载图像。 toDataURL() 从画布上下载没有效果的图像。如何在下载之前将过滤器绑定到图像？
您需要将过滤器直接应用于canvas 元素。然后下载，此方法会准确下载画布上下文中的内容。

标签： javascript html canvas webrtc

【解决方案1】：

您可以通过在canvas 元素上使用.toDataURL() 方法来做到这一点。然后将此应用于download 属性到<a> 标记。我们可以在图片周围添加一个锚标签：

<a>
    <canvas width="300" height="300" id="canvas"></canvas>
</a>

现在对于画布上的点击，我们调整 <a> 父级的 download 和 href：

$('#canvas').click(function(){
     $(this).parent().attr('href', document.getElementById('canvas').toDataURL());
     $(this).parent().attr('download', "myPicture.png");    
});

Here is an example

【讨论】：

谢谢。这解决了我的第一个问题，但下载的图像没有我应用的相应 css-webkit 过滤器。
@JashJacob 这是因为它将原始数据保存在画布上。您必须将过滤器直接应用于画布的上下文。画布无法访问 CSS 过滤器以绑定到它。您将需要修改ctx.getImageData。对于基本效果来说并不难（比如灰度）。你的过滤器在做什么？
我正在做类似的事情 -webkit-filter: contrast(1.3) grayscale(0.6) saturate(10) sepia(0.4);和 -webkit-filter: hue-rotate(180deg) saturate(200%);

【解决方案2】：

您也可以考虑使用 Concrete.js，它是一个轻量级的 HTML5 Canvas 框架，可以完成类似的外围工作，包括下载。你会这样做：

canvas.download({
  fileName: 'my-file.png'
});

【讨论】：