javascript - 有没有办法用 Canvas 实现类似 Photoshop 的乘法、差值等图层效果？

Question

我正在寻找一种方法来实现类似 Photoshop 的图层效果，例如 Canvas + JavaScript 的乘法和差值(以及屏幕)。

另外，Canvas 有模糊效果吗？

Answer 1

(假设您至少对图像处理有一定的了解。如果情况并非如此，您可能需要改进您的问题或询问范围更窄的另一个问题。)

这些图层效果并不难实现。 Wikipedia has descriptions of how they work以及一些提示。例如，对于乘法，您将每个 channel 和每个像素的值相乘，然后将结果除以 255。

至于模糊，通常通过简单的 convolution 来完成。例如，参见 Wikipedia again 。基本上，在对信号进行卷积时，您所做的就是查看具有不同权重的单个像素的邻域(对于高斯模糊，这些权重形成 2D 正态分布的形状)。简单的框模糊可以使用矩阵

1 1 1
1 1 1
1 1 1

这只会模糊每个像素及其直接周围的像素。在图像上执行三次此操作，您也可以获得高斯模糊的良好近似值。