我已经将CSS过滤器应用于画布,如下所示:
canvas.style.webkitFilter = 'hue-rotate(90deg)';
如果然后尝试使用锚元素的download属性下载画布的内容:
var imgData = canvas.toDataURL('image/*');
link.download = 'Image';
link.href = imgData;
下载的图像没有应用过滤器。即使我使用getImageData仅查看图像数据或尝试将图像源设置为图像数据,也会发生相同的问题。无论如何,JavaScript中是否有通过应用CSS过滤器来获取画布的图像数据的方法?
最佳答案
您可以在画布本身中应用色相平移。
例如,CamanJS库具有一些不错的图像过滤器:http://camanjs.com/
这来自他们的文档:
色调
调整图像的色调。它可以用来改变颜色
图像以统一的方式。范围是0到100。
有时,色相的范围是0到360。如果那是
您惯用的术语,以0到100表示
色相偏移百分比在0到360范围内。
CamanJS的示例代码:
Caman("#image", function () {
this.hue(90).render();
});