CODEWITHSUNDEEP
htmlinternet-explorercanvassvgwindows-runtime
nosirrahcd
nosirrahcd

Reputation: 1467

Apply SVG Filter to HTML5 Canvas?

Objective: Apply CSS Filters to video using html5 and JavaScript.

Contraints: The solution must be compatible with Internet Exporer 10 (for Windows 8). I am really making a Metro app.

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: I am hoping for a way to apply SVG filters to the canvas. Is this possible? Do I need to copy the <canvas> to an <image> and apply the filters to that? Alternatively, should there be a way to wrap the canvas in a <foreignObject>?

Thank you for all your help!

Here is some code for those interested:

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>

The Following Code Works, albeit very slowly, to accomplish my goal. Thank you, Anthony!

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

Upvotes: 3

Views: 4952

Answers (1)

Anthony
Anthony

Reputation: 37085

First, articles to read:

moving-to-standards-based-web-graphics-in-ie10

Notice specifically the sections:

Use SVG, not VML

and

Use CSS3, not DX Filters

In that second section, they mention:

DX Filters are not the same as SVG Filter Effects, though both use the CSS property name filter.

Second article:

Introduction to Filters and 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 and 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 and transitions, and that first article does mention using SVG. More details (hopefully helpful ones) at:

SVG Filter Effects in IE10

This looks like part 1 of the key:

A filter is applied to an SVG element via the filter attribute, in the form of filter="url(#filterId)", or it can be applied as a CSS property filter:url(#filterId)

And this is part 2:

There are 16 different filter primitives.

Now, I believe the 16 they refer to are the full set for SVG, but knowing MS, it could also mean either:

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

Or, to quote Lily Tomlin: "We don't care, we don't have to...we're the phone company."

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) and call them via css. Here is one of their examples (slightly modified and 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 and 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 and throws an error. So be sure if you want to keep it simple (non-dynamic) and things still aren't working, to try putting the filter/svg above the style (even if this causes a flicker).

Upvotes: 7

Related Questions