[英]Saving canvas with CanvasRenderingContext2D filter
I have the problem with saving photo with CanvasRenderingContext2D.filter. 我使用CanvasRenderingContext2D.filter保存照片时遇到问题。 When I connect to video and try to take a shot without any filters, it saves normally.
当我连接到视频并尝试在没有任何滤镜的情况下拍摄照片时,它通常会保存下来。 However, after adding some filters to canvas, it is saving as HTM file or return previous photo without filters if it was made.
但是,在画布上添加一些滤镜后,它会另存为HTM文件,或者返回以前没有滤镜的照片(如果已创建)。 The weird is, that while downloading that screenshot manually by clicking on it, it does have own toDataUrl, downloads normally and contains filter but while saving it using toDataUrl, it still doesn't see that picture.
奇怪的是,当通过单击手动下载该屏幕截图时,它确实拥有自己的toDataUrl,可以正常下载并包含过滤器,但是使用toDataUrl保存它时,仍然看不到该图片。 What should I do to save photos with these filters?
如何使用这些滤镜保存照片?
Here is the piece of my code: 这是我的代码:
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById("video"); document.getElementById("snapshot").addEventListener("click", function() { if ($('video').hasClass('blur')) { context.filter ="blur(2px)"; } else { context.filter= ""; } context.drawImage(video, 0, 0); }); document.getElementById("download").addEventListener("click", function() { download.href = canvas.toDataURL("image/jpeg"); };
.blur { -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); }
<video id="video" autoplay></video> <canvas id="canvas"></canvas> <button id="download" download="picture" href=""></button>
[Edit] : This bug has been fixed in FF52+ (current latest Nightly) [编辑]:此错误已被固定在FF52 +(当前最新每晚)
I let the answer and its workaround in case it helps someone some time. 我会给出答案及其解决方法,以防它对某人有所帮助。
This seems to be a bug in Firefox with filter-functions. 这似乎是带有过滤器功能的Firefox中的错误。 Chrome 54 seems to handle it just right.
Chrome 54似乎可以正确处理它。
When a filter-function is passed as the value of ctx.filter
, FF does taint the canvas, making all export methods unavailable ( toDataURL
included). 当将filter-function作为
ctx.filter
的值ctx.filter
,FF确实ctx.filter
了画布,使所有导出方法不可用(包括toDataURL
)。
However, it seems pretty happy with svg filters, so one workaround, until this bug is fixed, is to use an svg filter along with the url(#yourSVGFilter)
value type. 但是,似乎对svg过滤器非常满意,因此在解决此错误之前,一种解决方法是将svg过滤器与
url(#yourSVGFilter)
值类型一起使用。
var img = new Image(); var c = document.createElement('canvas'); var ctx = c.getContext('2d'); document.body.appendChild(c); btn.onclick = function() { var i = new Image(); i.src = c.toDataURL(); document.body.appendChild(i); }; img.onload = function() { c.width = this.naturalWidth; c.height = this.naturalHeight; // this doesn't taint the canvas ctx.filter = 'url(#blurMe)'; ctx.drawImage(img, 0, 0); } img.crossOrigin = 'anonymous'; img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
<svg width="0" height="0"> <filter id="blurMe"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> </svg> <button id="btn">call toDataURL()</button><br>
(And a fiddle that reproduces the problem for curious) (还有一个小提琴 ,出于好奇而重现了问题)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.