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

Question

我想知道是否有可能在网页上使用类似于 Photoshop 中的混合模式（叠加、筛选、变亮等）将两个或多个图像混合在一起。

我知道可以使用 Flash 和 Java 这样的插件实现这种效果，但是是否可以使用 CSS 或 JavaScript 等无需插件的方式实现？我看到过一些 JavaScript 示例可以在相对较小的图像上运行此效果，但是我希望能够在高分辨率图像上执行此操作……这仅用于实验目的。

- Greg

Answer 1

使用画布元素，您可以轻松地获得叠加和减淡效果。这取决于在将每个位图渲染到画布之前指定的设置。请参考以下链接了解更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing。

- Eric Mickelsen

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} );

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

- Phrogz

---

@Greg 我在直接复制141x141区域时获得了约210fps的速度，并且在执行“差异”模式（当前性能较差）时获得了约160fps的速度，使用的是Safari v5。在Chrome上的性能更好，Firefox则更差。我只进行了一个主要的优化（故意不进行）：现在，在像素上循环的for内部有一个switch。将每个case内部的循环展开可以提供约5-10％的速度提升，但会使代码库扩展得难看、不DRY，并且重复所有模式共同的计算。 - Phrogz

@Greg 目前这个库有145行可读的代码（其中大约14行是注释，我真的需要删除它们）。 - Phrogz

@Di-0xide 请看我12月20日上面的评论；这样做是为了方便和DRYness。如果您需要绝对速度，可以将循环移动到开关内部，可能会获得适度的性能提升。 - Phrogz

@Phrogz - 我也是这么想的。我稍后会试着调整一下，看看是否有明显的性能提升。 - Qix - MONICA WAS MISTREATED

@Phrogz：谢谢你！我发现你的例子有点难以理解，只是想在页面上混合两个画布，但我还是熬过去了，最终弄明白了。你有兴趣听听改进文档的建议吗？ - Scott Cranfill