Question

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

以下是我的代码：

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>

Answer 1

[编辑]：此错误在FF52 +中有been fixed （当前最近每晚）我让答案及其解决方法，以防有人帮助某个人。

这似乎是Firefox中带有过滤功能的错误。 Chrome 54似乎正确处理它。

当过滤函数作为toDataURL的值传递时，FF会对画布进行污染，使所有导出方法不可用（包括url(#yourSVGFilter)）。

但是，对于svg过滤器似乎非常满意，因此修复this bug之前的一个解决方法是使用svg filter和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';值类型。

＆＃13;

<svg width="0" height="0">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  </filter>
</svg>

<button id="btn">call toDataURL()</button><br>

＆＃13;

ID  Name        StartDate                   EndDate
1   Paris      2014-02-01 00:00:00.000  2014-02-28 23:59:59.000
2   UK         2014-02-01 00:00:00.000  2014-02-28 23:59:59.000
3   France     2014-02-01 00:00:00.000  2014-02-28 23:59:59.000

＆＃13;

（和fiddle再现好奇的问题）

使用CanvasRenderingContext2D过滤器保存画布

1 个答案: