javascript - 使用 CSS 或 JavaScript 的网页中的 Photoshop 式混合模式？

Question

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

我知道这种事情可以用 flash 和 java 来实现，但是如果没有任何插件，比如 CSS 或 JavaScript，它是否可能？我已经看到了一些适用于相对较小图像的效果的 javascript 示例，但我有兴趣在高分辨率图像上执行此效果......这纯粹是出于实验目的。

Answer 1

使用 canvas 元素，你可以很容易地获得覆盖和变亮。这完全取决于您在将每个位图渲染到画布之前指定的设置。

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

Answer 2

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

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

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

有关更多信息，请参阅自述文件，包括当前版本支持的混合模式。