CSS veya JavaScript'i kullanarak web sayfalarında Photoshop-esque karışım modunu?

Question

İki veya daha fazla görüntüyü bir web sayfasında bir araya getirip paylaşmayacağınızı merak ediyorum (photoshop (bindirme, ekran, açıklık vb.) Gibi karışım modlarını kullanarak.

Bu tür bir şeyin flaş ve java ile mümkün olduğunu biliyorum, ancak herhangi bir eklenti olmaksızın, yani CSS veya JavaScript ile mümkün mü? Bu efektin birkaç javascript örneğini görüyorum ki, göreceli olarak küçük görüntüler üzerinde çalışıyorum, ancak bunu yüksek çözünürlüklü görüntüler üzerinde yapmakla ilgileniyorum ... bu sadece deneysel amaçlar içindir.

Answer 1

Tuval öğesi ile bindirme yapabilir ve kolayca hafifçe aydınlatabilirsiniz. Her bir bitmapi tuvale sunmadan önce belirlediğiniz ayarlarla ilgilidir. başka bir HTML Tuval bağlamında Photoshop tarzı karışım modlarını gerçekleştirmek için

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

Answer 2

Ayrı, hafif, açık kaynak kitaplığı oluşturduk: 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}); 

geçerli sürümünde desteklenen karışım modu da dahil, daha fazla bilgi için README bakınız: İşte örnek kullanımı var.