Photoshop-ähnliche Mischung Modus in Webseiten mit CSS oder JavaScript?

Question

Ich frage mich, ob es möglich ist, zwei oder mehr Bilder auf einer Webseite mit Blend-Modi, wie Sie es in Photoshop finden (Overlay, Bildschirm, Aufhellen, etc.) zu mischen.

Ich weiß, dass diese Art von Sache mit Flash und Java möglich ist, aber ist es möglich, ohne Plugins, also mit CSS oder JavaScript? Ich habe ein paar Javascript-Beispiele für diesen Effekt gesehen, die auf relativ kleinen Bildern arbeiten, aber ich bin daran interessiert, dies auf hochauflösenden Bildern zu tun ... das ist rein zu experimentellen Zwecken.

Answer 1

Mit dem Canvas-Element können Sie sehr leicht überlagern und aufhellen. Es kommt darauf an, welche Einstellungen Sie vor dem Rendern jedes Bitmaps auf der Arbeitsfläche festlegen.

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

Answer 2

Ich habe eine separate, leicht, Open-Source-Bibliothek erstellt für Photoshop-Stil Mischmodi von einer HTML-Canvas Kontext zu einem anderen auszuführen: context-blender. Hier ist die Probe Nutzung:

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

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

Siehe README für weitere Informationen, einschließlich der Mischmodi in der aktuellen Version nicht unterstützt.