使用CSS webkitFilter绘制toDataURL

Question

我已经将CSS过滤器应用于画布，如下所示：

canvas.style.webkitFilter = 'hue-rotate(90deg)';

如果我然后尝试使用锚元素的下载属性下载画布的内容：

var imgData = canvas.toDataURL('image/*');
link.download = 'Image';
link.href = imgData;

下载的图片没有应用过滤器。即使我使用getImageData来查看图像数据或尝试将图像源设置为图像数据，也会出现同样的问题。在JavaScript中是否存在使用CSS过滤器获取画布的图像数据？

Answer 1

您可以在画布中应用Hue-shift。

例如，CamanJS库有一些不错的图像过滤器：http://camanjs.com/

这是来自他们的文档：

  

色相

     

调整图像的色调。它可以用来移动颜色   图像以统一的方式。范围是0到100。

     

有时，Hue表示在0到360的范围内。如果是这样的话   你习惯的术语，想象0到100代表   色调偏移的百分比在0到360范围内。

来自CamanJS的示例代码：

Caman("#image", function () {
      this.hue(90).render();
});