使用过滤器从 Canvas 中检索 Base64答案

【问题标题】：Retrieve Base64 from Canvas with filters使用过滤器从 Canvas 中检索 Base64
【发布时间】：2021-06-17 20:04:15
【问题描述】：

我需要从 Canvas 中检索 Base64，我在其中应用了一些 CSS 过滤器。

我试过了
canvas.toDataURL()

但它会给出原始图像的Base64。

有没有办法用过滤器检索图像的 Base64？

【问题讨论】：

CSS 过滤器是有效的后处理，它们不是画布上图像的一部分。您需要自己（或使用库）对画布上的数据应用类似的过滤器。
@DBS 所以我应该直接对 Base64 应用过滤器？
在您生成 base64 之前，我会将其应用到画布本身。如果你的浏览器支持它，canvas API 有 some standard filters built in 否则，也许看看做类似事情的库（或者 write the filters yourself 如果你对像素级操作感兴趣）
@DBS 谢谢！发布答案，以便我可以给您积分:)

【解决方案1】：

CSS 过滤器不是画布本身的一部分，它们应用在画布上。

要在生成的图像中包含过滤器，您需要使用 JavaScript 将过滤器应用到画布本身，为此您有两个主要选项：

【讨论】：