css 滤镜色调旋转的 "real" 算法是什么?
What's the "real" algorithm for css filter hue-rotate?
我目前正在尝试复制 css 过滤器 "hue-rotate",它在服务器上跨浏览器生成与 svg feColorMatrix "hueRotate" 相同的结果。我查看了规范、firefox 实现和 webkit 实现。
我把每个算法移植到 ruby,但结果仍然与我在浏览器中看到的不同。
我已经将一些 jsfiddle 放在一起以查看示例图像的差异。
<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>
这里是转换图像的普通 ruby-code。
问题是:秘方是什么?为什么生成的图像仍然不同?
PS:
firefox和webkit虽然算法略有不同,但结果是一样的。
我尝试了 image magick 和 gimp,它们产生相同的结果,但再次不同于浏览器结果,也不同于上面假设的算法。
Phantomjs 还有其他错误。
参数的顺序不需要正确吗?
def calculate_hue_webkit(r,b,g,angle)
...
result = calculate_hue_webkit(r,g,b,90)
我目前正在尝试复制 css 过滤器 "hue-rotate",它在服务器上跨浏览器生成与 svg feColorMatrix "hueRotate" 相同的结果。我查看了规范、firefox 实现和 webkit 实现。 我把每个算法移植到 ruby,但结果仍然与我在浏览器中看到的不同。
我已经将一些 jsfiddle 放在一起以查看示例图像的差异。
<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>
这里是转换图像的普通 ruby-code。
问题是:秘方是什么?为什么生成的图像仍然不同?
PS: firefox和webkit虽然算法略有不同,但结果是一样的。 我尝试了 image magick 和 gimp,它们产生相同的结果,但再次不同于浏览器结果,也不同于上面假设的算法。 Phantomjs 还有其他错误。
参数的顺序不需要正确吗?
def calculate_hue_webkit(r,b,g,angle)
...
result = calculate_hue_webkit(r,g,b,90)