如何下载HTML5画布上的图像？ [英] How to download a image that's on HTML5 canvas?

问题描述

我写了这个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来完成此操作<）c $ c> 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画布上的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！