如何用webkit-filter效果保存html5个视频元素？

Question

我可以将 HTML5 视频元素保存到 DataURL 并且工作正常。但是当我将 -webkit-filter css 规则添加到视频元素时出现问题 - 我可以拍摄的图片不受 -webkit-filter 的影响。我的代码：

var canvas = document.createElement('canvas');
canvas.width = 860;
canvas.height = 640;
var ctx = canvas.getContext('2d');
ctx.drawImage(this.target, 0, 0, canvas.width, canvas.height);
canvas.style['-webkit-filter'] = 'blur(2px)';

var dataURI = canvas.toDataURL('image/jpeg'); 
window.open(dataURI);

但仍然没有保存 "blur" 效果 - 只有普通图片。

如果有人能帮助我，我将不胜感激:)

Answer 1

您可以使用 myNewImg.src=canvas.toDataURL() 创建一个 img 元素，然后将过滤器应用于该新 img。

这是示例代码和演示（在 Chrome 浏览器中查看）：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/Whosebug/card.png";
function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  var filteredImg=new Image();
  filteredImg.id='filteredImg';
  filteredImg.onload=function(){
    document.body.appendChild(filteredImg);

  }
  filteredImg.src=canvas.toDataURL();

}

body{ background-color: ivory; }
#canvas{border:1px solid red; }
#filteredImg{ 
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}

<h4>View in Chrome or FF. IE & Edge don't yet support filters</h4>
<canvas id="canvas" width=300 height=300></canvas>

如何用webkit-filter效果保存html5个视频元素？

How to save html5 video element with webkit-filter effect?

javascript

css

html

canvas

getusermedia