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

我写了这个webRTC应用程序，它将不同的过滤器添加到它的照片。当我点击点击按钮时，来自webRTC视频源的帧被加载到右侧的画布上。如何下载HTML5画布上的图片？

enter image description here

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); 
    }

哪有在照片被点击后，我允许用户使用滤镜将图像下载到计算机上编辑？

来源

2014-09-26 Jash Jacob

你可以在'canvas'元素上使用'.toDataURL（）'方法，使用'a'标签来做到这一点。这里是一个例子（不是我的）：http://jsfiddle.net/AbdiasSoftware/7PRNN/ – 2014-09-26 01:30:51

@SpencerWieczorek它不允许我在应用效果后从画布下载图像。 toDataURL（）从画布下载图像而没有效果。下载前如何将滤镜绑定到图像上？ – 2014-09-26 01:41:32

您将需要直接将过滤器应用于'canvas'元素。然后下载，这个方法准确下载画布上下文中的内容。 – 2014-09-26 01:51:59

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

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

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

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

Here is an example

来源

2014-09-26 01:51:02

谢谢。这解决了我的第一个问题，但下载的图像没有我应用的相应css-webkit过滤器。 – 2014-09-27 02:12:59

@JashJacob这是因为它将原始数据保存在画布上。您必须将过滤器直接应用到画布的上下文中。画布无法访问CSS过滤器以绑定到它。您将需要修改'ctx.getImageData'。对于基本效果来说并不难（如灰度）。你的过滤器在做什么？ – 2014-09-27 02:43:31

我正在做这样的事情-webkit过滤器：对比（1.3）灰度（0.6）饱和（10）棕褐色（0.4）;和-webkit-filter：色调旋转（180deg）饱和（200％）; – 2014-09-27 12:04:05

你可能还可以考虑使用Concrete.js，这是一个轻量级的HTML5 Canvas框架，可以完成像这样的外围设备，包括下载。你可以这样做：

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

来源

2016-03-31 15:13:16

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

回答

相关问题