Search code examples
rubysvgwebkithuesvg-filters

What's the "real" algorithm for css filter hue-rotate?


I'm currently trying to replicate the css filter "hue-rotate", which produces the same as svg feColorMatrix "hueRotate" across browsers, on the server. I looked at the spec, the firefox implementation and the webkit implementation. I ported each algorithm to ruby, but the results are still different from what I see in my browsers.

I have put togehter a little jsfiddle to see the differences for an example image.

<body>
<p>Original image:</p>
<div class="image"></div>
<p>Browser filtered image: (<- I need this generated on the server!</p>
<div class="image hue-90" ></div>
<p>Webkit/spec algorithm image:</p>
<div class="webkit-algorithm-result"></div>
</body>

And here's the plain ruby-code to convert the image.

The question is: What is the secret ingredient? Why is the resulting image still different?

PS: Even though algorithms of firefox and webkit are slightly different, the result is the same. I tried image magick and gimp which are produce equal results but are again different from browser results AND different from the assumed algorithms above. Phantomjs has other bugs.

Firefox Implementation

Webkit Implementation

Spec


Solution

  • Don't you need to have the arguments in the right order?

    def calculate_hue_webkit(r,b,g,angle)

    ...

    result = calculate_hue_webkit(r,g,b,90)