我想知道是否有可能在网页上使用类似于 Photoshop 中的混合模式(叠加、筛选、变亮等)将两个或多个图像混合在一起。
我知道可以使用 Flash 和 Java 这样的插件实现这种效果,但是是否可以使用 CSS 或 JavaScript 等无需插件的方式实现?我看到过一些 JavaScript 示例可以在相对较小的图像上运行此效果,但是我希望能够在高分辨率图像上执行此操作……这仅用于实验目的。
我想知道是否有可能在网页上使用类似于 Photoshop 中的混合模式(叠加、筛选、变亮等)将两个或多个图像混合在一起。
我知道可以使用 Flash 和 Java 这样的插件实现这种效果,但是是否可以使用 CSS 或 JavaScript 等无需插件的方式实现?我看到过一些 JavaScript 示例可以在相对较小的图像上运行此效果,但是我希望能够在高分辨率图像上执行此操作……这仅用于实验目的。
我创建了一个轻量级的开源库,用于在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了解更多信息,包括当前版本支持的混合模式。
for
内部有一个switch
。将每个case
内部的循环展开可以提供约5-10%的速度提升,但会使代码库扩展得难看、不DRY,并且重复所有模式共同的计算。 - Phrogz