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

我写了这个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>
    <canvas width="300" height="300" id="canvas"></canvas>
</a>

现在,点击画布,我们调整< a>的下载和href.父：

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

Here is an example