使用CanvasRenderingContext2D过滤器保存画布 [英] Saving canvas with CanvasRenderingContext2D filter

问题描述

我有用CanvasRenderingContext2D.filter保存照片的问题。当我连接到视频并尝试在没有任何过滤器的情况下拍摄时，它会正常保存。但是，在向画布添加一些过滤器后，它将保存为HTM文件或返回上一张没有过滤器的照片（如果已制作）。奇怪的是，通过点击它手动下载截图时，它确实有自己的toDataUrl，正常下载并包含过滤器，但在使用toDataUrl保存时仍然看不到该图片。
我应该如何使用这些过滤器保存照片？

以下是我的代码片段：

< pre class =snippet-code-js lang-js prettyprint-override> 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 =videoautoplay>< / video>< canvas id =canvas>< / canvas>< button id =download download =picturehref =>< / button>  

解决方案

：此错误有已被修复在FF52 + （当前最新的每夜）

我让答案及其解决方法，以便它可以帮助某人一段时间。

---

这似乎是一个BU在Firefox中使用过滤器函数。 Chrome 54似乎正好处理它。

当过滤函数作为 ctx.filter ，FF确实污染了画布，使得所有的导出方法都不可用（包括 toDataURL ）。然而，看起来非常满意svg过滤器，所以一个解决方法，直到此错误得到修复，是要使用 svg过滤器和 url（#yourSVGFilter） value type。

$ b

  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; //这不会污染画布ctx.filter ='url（#blurMe）'; ctx.drawImage（img，0,0）;} img.crossOrigin ='anonymous'; img.src ='https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png'; < svg width =0height =0>>< / pre> 
 
 

（和小提琴

a>为好奇再现问题）

I have the problem with saving photo with 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. 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. 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)
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. Chrome 54 seems to handle it just right.

When a filter-function is passed as the value of ctx.filter, FF does taint the canvas, making all export methods unavailable (toDataURL included).

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.

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)

这篇关于使用CanvasRenderingContext2D过滤器保存画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！