3

目标：使用 html5 和 JavaScript 将 CSS 过滤器应用于视频。

限制：该解决方案必须与Internet Explorer 10（适用于 Windows 8）兼容。我真的在制作一个 Metro 应用程序。

到目前为止： 我有一个<video>我正在抽到一个<canvas>. 我以为我可以将 CSS 过滤器直接应用于此（例如invert或brightness），但事实证明这些过滤器与 IE10 不兼容。

想法：我希望有一种方法可以将 SVG 过滤器应用于画布。这可能吗？我是否需要将其复制<canvas>到<image>并对其应用过滤器？或者，是否应该有办法将画布包裹在<foreignObject>?

谢谢你的帮助！

这里有一些代码供有兴趣的人参考：

过滤器.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>

样式.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>
4

1 回答 1

6

首先，要阅读的文章：

转向基于标准的 web-graphics-in-ie10

请特别注意以下部分：

使用 SVG，而不是 VML

和

使用 CSS3，而不是 DX 过滤器

在第二部分，他们提到：

DX 过滤器与 SVG 过滤器效果不同，尽管两者都使用 CSS 属性名称过滤器。

第二条：

过滤器和转换简介

他们给出了如何使用的具体示例invert，但是，假设它是IE 中的方式，我可以理解为什么它不容易找到，并且可能会或可能不会在您的情况下工作。但CSS将是：

#yourTargetElement {
     filter: DXImageTransform.Microsoft.BasicImage(invert=1);
}

他们没有提到亮度，但确实提到了其他几个过滤器和过渡，第一篇文章确实提到了使用 SVG。更多详细信息（希望对您有所帮助）：

IE10 中的 SVG 滤镜效果

这看起来像关键的第 1 部分：

过滤器通过 filter 属性应用于 SVG 元素，形式为 filter="url(#filterId)"，或者可以作为 CSS 属性 filter:url(#filterId)

这是第 2 部分：

有 16 种不同的过滤器原语。

现在，我相信他们提到的 16 个是 SVG 的完整集，但了解 MS，它也可能意味着：

  1. 这些是我们支持的 16 个，或者
  2. 这些是我们发明的 16 个，以继续我们的主张，即使 IE 标准兼容和 SVG/MathML 友好，但使其比在任何其他浏览器中更难......因为我们可以。

或者，引用莉莉汤姆林的话：“我们不在乎，我们不必……我们是电话公司。”

但是，假设 MS 最终意识到他们需要赶上，进一步阅读 16 个原始过滤器，假设您只有嵌入的 SVG，过滤器在正确的位置 ( defs) 并通过 css 调用它们。这是他们的一个例子（我稍微修改和简化了）：

带嵌入式 SVG 的 HTML：

<div id="svg_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 800 533" preserveAspectRatio="xMidYMin">
    <defs>
     <filter id="filtersPicture">
             <feComposite operator="arithmetic" k1="0" k2="1" k3="0" k4="0" 
               in="SourceGraphic" in2="SourceGraphic" result="inputTo_6">
             </feComposite>      
             <feColorMatrix type="saturate" id="filter_6" values="2" 
                            data-filterId="6">
             </feColorMatrix>
             </filter>
   </svg>
  </div>

CSS（他们使用 JS 使其动态化，所以要小心）：

<style type="text/css">
     #yourTargetElement{
             filter:url(#filtersPicture);
      }
 </style>

我警告他们让它看起来多么“简单”的原因是因为他们正在通过 js 和交互式表单添加样式（也许你有同样的想法），但我认为这与在在 DOM 中之前的脚本，因为它找不到过滤器并引发错误。因此，请确保如果您想保持简单（非动态）并且事情仍然无法正常工作，请尝试将 filter/svg 放在样式之上（即使这会导致闪烁）。

于 2012-05-26T13:22:59.093 回答