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가 올바르게 처리 된 것으로 보입니다.

필터 함수가 ctx.filter 값으로 전달되면 FF로 캔버스가 흐려 지므로 모든 내보내기 방법을 사용할 수 없게됩니다 (toDataURL 포함).

그러나 svg 필터는 매우 만족 스럽습니다. this bug이 수정 될 때까지 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)를