使用 CSS webkitFilter 画布 toDataURL答案

【问题标题】：Canvas toDataURL with CSS webkitFilter使用 CSS webkitFilter 画布 toDataURL
【发布时间】：2013-04-23 03:30:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

这是来自他们的文档：

色调

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

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

来自 CamanJS 的示例代码：

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

【讨论】：