我已经将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();
});

10-05 20:50
查看更多