javascript - 使用 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 过滤器来获取画布的图像数据？

score 0 · Accepted Answer

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

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

这是来自他们的文档：

色调

调整图像的色调。它可用于以统一的方式改变图像中的颜色。范围是 0 到 100。

有时，色调在 0 到 360 的范围内表示。如果这是您习惯的术语，请认为 0 到 100 代表 0 到 360 范围内色调偏移的百分比。

来自 CamanJS 的示例代码：

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

1 回答 1