CanvasRenderingContext2Dフィルタを使用してキャンバスを保存する

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はそれを正しく処理しているようです。

フィルター関数がの値として渡されると、FFはキャンバスを汚し、すべてのエクスポートメソッドを使用できなくします（toDataURLを含む）。

しかし、それは、SVGフィルターとはかなり満足しているようだ、そうthis bugが固定されるまで1つの回避策は、url(#yourSVGFilter)値型と一緒に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';

<svg width="0" height="0"> 
 
    <filter id="blurMe"> 
 
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> 
 
    </filter> 
 
</svg> 
 

 
<button id="btn">call toDataURL()</button><br>

（そして好奇心のために、問題を再現しfiddle）