Question

<强度> 目标: 用 html5 和 JavaScript 对视频应用 CSS 过滤器。

contraints: 解决方案 must 与 Internet Exporer 10 (Windows 8) 兼容。我真的在做一个Metro 应用程序。

So Far: I have a <video> that I am pumping onto a <canvas>. I thought I would be able to apply CSS filters directly to this (e.g. invert or brightness) but it turns out those are not compatible with IE10.

Thoughts: 我希望能找到一种方法将 SVG 过滤器应用到画布上。可能吗? 我是否需要将复制到上, 并将过滤器应用到这个上面? 或者, 是否应该有办法将画布包装在中?

Thank you for all your help!

以下为感兴趣的人士提供守则:

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

页面. 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>

Works (虽然缓慢) 来完成我的目标。谢谢, 安东尼!

<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>

Answer 1

首先,条款改为:

Introduction to Filters 和 Transitions

They give a specific example of how to use invert, but, assuming it is the way in IE, I can see why it wasn t easy to find 和 may or may not work in your case. But the css would be:

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

They don t mention brightness, but they do mention several other filters 和 transitions, 和 that first article does mention using SVG. More details (hopefully helpful ones) at:

SVG IE10过滤效应

这看起来像键的第一部分:

通过过滤属性对 SVG 元素应用过滤器, 其形式为过滤器=“ url (# filterId) ”, 也可以作为 CSS 属性过滤器应用 :url (# filterId)

这是第2部分:

有16个不同的过滤原始。

我认为他们提到的16个是SVG的全套, 但知道MS,它也可能意味着要么:

These are the 16 we support, or
These are the 16 we ve invented so as to continue our claim to make IE st和ards-compliant 和 SVG/MathML friendly, but making it harder than it would be in any other browser...because we can.

或者引用Lily Tomlin的话:“我们不在乎,我们不必... 我们成为电话公司。”

But, assuming MS is finally realizing they need to catch up, reading further on the 16 primitive filters, supposedly you just have your embedded SVG, with the filters in the right place (defs) 和 call them via css. Here is one of their examples (slightly modified 和 simplified by me):

HTML w/ Embedded SVG:

<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 (They use JS to make it dynamic, so beware):

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

The reason I caution on how "easy" they make it look is because they are adding the style via js 和 an interactive form (maybe you have the same thing in mind), but I imagine that runs the same risk as calling an element in a script before it is in the DOM, in that it can t find the filter 和 throws an error. So be sure if you want to keep it simple (non-dynamic) 和 things still aren t working, to try putting the filter/svg above the style (even if this causes a flicker).

Thank you for all your help!

HTML w/ Embedded SVG:

CSS (They use JS to make it dynamic, so beware):

友情链接