使用CSS或JavaScript在網頁中使用Photoshop-esque混合模式？

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

有關更多信息，請參閱自述文件 ，包括當前版本支持的混合模式。