【发布时间】：2012-06-01 05:26:58
【问题描述】：
目标：使用 html5 和 JavaScript 将 CSS 过滤器应用于视频。
限制：解决方案必须与Internet Exporer 10（适用于Windows 8）兼容。我真的在制作 Metro 应用程序。
到目前为止：
我有一个<video>，我将它注入<canvas>。我以为我可以直接对它应用 CSS 过滤器（例如 invert 或 brightness），但事实证明这些过滤器与 IE10 不兼容。
想法：我希望有一种方法可以将 SVG 过滤器应用于画布。这可能吗？我是否需要将<canvas> 复制到<image> 并对其应用过滤器？或者，是否有办法将画布包裹在 <foreignObject> 中？
感谢您的帮助！
这里有一些代码供有兴趣的人参考：
filters.svg：
<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
</filter>
</defs>
</svg>
style.css：
.a {
filter: url(filter.svg#blur);
-ms-transform: matrix(-1, 0, 0, 1, 0, 0);
}
page.html:
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<canvas class="a" style="width: 180px;height:180px;margin-bottom: -5px;" data-win-bind="style.backgroundColor: bc; id: effectId" />
</div>
以下代码工作，虽然速度很慢，但可以实现我的目标。谢谢你，安东尼！
<html>
<head>
</head>
<body>
<svg id="svgroot" viewbox="0 0 800 800" width="800" height="800" preserveAspectRatio="xMidYMin">
<defs>
<filter id="myHueRotate">
<feColorMatrix type="hueRotate" values="270"/>
</filter>
</defs>
<image id="a" filter="url(#myHueRotate)" x="0" y="0" width="300" height="300" />
<image id="b" filter="url(#myHueRotate)" x="300" y="0" width="300" height="300" />
<image id="c" filter="url(#myHueRotate)" x="0" y="300" width="300" height="300" />
<image id="d" filter="url(#myHueRotate)" x="300" y="300" width="300" height="300" />
</svg>
<canvas id="canvas" height="300" width="300"></canvas>
<video id="vid" src="movie.m4v" height="300" width="300" style="display: none" autoplay/>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'img.jpg';
img.onload = function(){
//ctx.drawImage(img,0,0);
//var canvasImage = canvas.toDataURL("image/png");
//var svgImage = document.getElementById('a');
//svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
draw();
}
img.load();
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
var vid = document.getElementById('vid')
ctx.drawImage(vid,0,0,300,300);
var canvasImage = canvas.toDataURL("image/png");
document.getElementById('a').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('b').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('c').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('d').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
setTimeout(draw,40);
}
</script>
</body>
</html>
【问题讨论】：
-
我建议先尝试将画布或视频嵌入到SVG 直接通过
<foreignObject>看看你是否可以获得过滤器来应用它。但首先：您是否验证过 IE10 完全支持您想要的 SVG 过滤器，即使是在静态图像上？ -
很遗憾 IE9/10 不支持
<foreignObject> -
@RobertLongson - IE10 确实支持通过 CSS 调用 SVG 过滤器，所以有希望。和IE9一样，它承诺最终会被赶上，现在与IE7和IE8一样，除非你的老板拒绝升级，否则无关紧要。阅读我在回答中引用的 Ma Bell 名言。除非我们作为开发人员不再担心 IE 用户（我知道这很难），否则他们将永远支持我们，而这显然应该是 4 种主要替代品和更好的浏览器。
-
我想知道 Internet Exporer 是不是故意的失误？
;)
标签： html internet-explorer canvas svg windows-runtime