问题描述
我写了这个webRTC应用程序,它使用添加了不同过滤器的照片。当我点击单击按钮时,webRTC视频源中的帧被加载到右侧的画布上。
I wrote this webRTC app which takes photos with different filters added onto it. When I click on the click button, the frame from the webRTC video feed is loaded onto the canvas on the right side.
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>
我添加过滤器后写入将图片捕捉到画布上的功能如下
The function I've written to snap the picture onto the canvas after adding the filter is as follows
function snap()
{
canvas.className = '';
if (findex != 0)
canvas.classList.add(filters[findex]);
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
如何让用户从画布下载图像到电脑上单击照片后使用过滤器?
How can I allow the user to download the image onto the computer from the canvas with the filters after the photo has been clicked ?
推荐答案
您可以使用 .toDataURL来完成此操作 canvas
元素上的()方法。然后将此应用于下载
属性到< a>
标记。我们可以在图片周围添加锚标记:
You can do this by using the .toDataURL()
method on the canvas
element. And then apply this to the download
attribute to an <a>
tag. We can add an anchor tag around the image:
<a>
<canvas width="300" height="300" id="canvas"></canvas>
</a>
现在点击画布,我们调整下载< a>
父母的c $ c>和 href
:
Now for the clicking on the canvas, we adjust the download
and href
of the <a>
parent:
$('#canvas').click(function(){
$(this).parent().attr('href', document.getElementById('canvas').toDataURL());
$(this).parent().attr('download', "myPicture.png");
});
这篇关于如何下载HTML5画布上的图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!