3

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

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

到目前为止: 我有一个<video>我正在抽到一个<canvas>. 我以为我可以将 CSS 过滤器直接应用于此(例如invertbrightness),但事实证明这些过滤器与 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 回答