Modalità fusione Photoshop-esque nelle pagine Web utilizzando CSS o JavaScript?

Question

Mi chiedo se sia possibile unire due o più immagini insieme in una pagina Web utilizzando i metodi di fusione come quelli che troverete in Photoshop (sovrapposizione, schermo, schiarita, ecc.).

So che questo tipo di cose è possibile con flash e java, ma è possibile senza plug-in con CSS o JavaScript? Ho visto alcuni esempi javascript di questo effetto che funzionano su immagini relativamente piccole, ma sono interessato a farlo su immagini ad alta risoluzione ... questo è puramente a scopo sperimentale.

Answer 1

Con l'elemento canvas, è possibile ottenere sovrapposizioni e schiarire con facilità. Riguarda le impostazioni specificate prima di rendere ogni bitmap sul canvas.

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

Answer 2

Ho creato un leggero libreria separata,, open-source per eseguire i metodi di fusione in stile Photoshop dal contesto della tela di canapa un HTML ad un altro: context-blender. Ecco l'utilizzo del campione:

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

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

Vedere la README per ulteriori informazioni, compresi i metodi di fusione supportati nella versione corrente.