2

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

3
  • One thing that it looks like you are not doing is converting the colours to the sRGB colour space (which is required by the spec). Though I don't think that will explain the big difference in your images.
    – Paul LeBeau
    Commented Sep 17, 2015 at 10:47
  • image magick says my source image has sRGB: spaceparty.png PNG 120x120 120x120+0+0 8-bit sRGB 31.8KB 0.000u 0:00.009
    – RedRoosterMobile
    Commented Sep 17, 2015 at 10:49
  • as Robert Longson stated, I accidentally interchanged some color values. Still ruby, and even jruby was way to slow for my needs. I ended up with this c++ cmd tool github.com/RedRoosterMobile/huerotate-like-webkit
    – RedRoosterMobile
    Commented Sep 17, 2015 at 20:02

1 Answer 1

Reset to default
3

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)

1
  • dude, big hug to you! I need new glasses.. Now the resulting image is exactly what I was looking for!
    – RedRoosterMobile
    Commented Sep 17, 2015 at 10:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.