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

Question

我写了这个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);
    }

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

Answer 1

您可以使用.toDataURL()元素上的canvas方法执行此操作。然后将此download属性应用于<a>标记。我们可以在图像周围添加锚标记：

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

现在，为了点击画布，我们会调整download父级的href和<a>：

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

Here is an example

Answer 2

你也可以考虑使用Concrete.js，这是一个轻量级的HTML5 Canvas Framework，可以做这样的外围设备，包括下载。你会这样做：

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