javascript - 使用 CSS webkitFilter 绘制 toDataURL

Question

我已经将 CSS 过滤器应用到 Canvas 上，如下所示:

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

如果我然后尝试使用 anchor 元素的下载属性下载 Canvas 的内容:

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

下载的图像没有应用滤镜。即使我使用 getImageData 只是查看图像数据或尝试将图像源设置为图像数据，也会出现同样的问题。无论如何，在 JavaScript 中是否可以获取应用了 CSS 过滤器的 Canvas 的图像数据？

Answer 1

您可以在 Canvas 本身中应用色相偏移。

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

这是来自他们的文档:

Hue

Adjusts the hue of the image. It can be used to shift the colors in an image in a uniform fashion. The Range is 0 to 100.

Sometimes, Hue is expressed in the range of 0 to 360. If that's the terminology you're used to, think of 0 to 100 representing the percentage of Hue shift in the 0 to 360 range.

来自 CamanJS 的示例代码:

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