使用 CSS 或 JavaScript 在网页中实现 Photoshop 风格的混合模式？

Question

我想知道是否可以使用 Photoshop 中的混合模式（叠加、屏幕、加亮等）在网页上将两个或多个图像混合在一起。

我知道这种事情可以用 flash 和 java 实现，但是没有任何插件（即 CSS 或 JavaScript）是否可以实现？我见过一些这种效果的 javascript 示例，它们适用于相对较小的图像，但我有兴趣在高分辨率图像上执行此操作...这纯粹是出于实验目的。

Answer 1

使用画布元素，您可以轻松获得叠加和增亮效果。这完全取决于您在将每个位图渲染到画布之前指定的设置。

https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Answer 2

我创建了一个单独的、轻量级的开源库，用于从一个 HTML Canvas 上下文到另一个上下文执行 Photoshop 风格的混合模式：

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

请参阅 README 了解更多信息，包括支持的混合模式当前版本。