सीएसएस या जावास्क्रिप्ट का उपयोग कर वेब पृष्ठों में फ़ोटोशॉप-एस्क्यू मिश्रण मोड?

Question

मुझे आश्चर्य है कि क्या दो या दो से अधिक छवियों को मिश्रण मोड का उपयोग करके एक वेबपृष्ठ पर मिश्रित करना संभव है जैसे कि आप फ़ोटोशॉप (ओवरले, स्क्रीन, लाइटन इत्यादि) में पाएंगे।

मुझे पता है कि इस तरह की चीज फ़्लैश और जावा के साथ संभव है, लेकिन क्या यह सीएसएस या जावास्क्रिप्ट के साथ किसी भी प्लगइन के बिना संभव है? मैंने इस प्रभाव के कुछ जावास्क्रिप्ट उदाहरण देखे हैं जो अपेक्षाकृत छोटी छवियों पर काम करते हैं, लेकिन मुझे उच्च रिज़ॉल्यूशन छवियों पर प्रदर्शन करने में दिलचस्पी है ... यह पूरी तरह प्रयोगात्मक उद्देश्यों के लिए है।

Answer 1

कैनवास तत्व के साथ, आप ओवरले प्राप्त कर सकते हैं और आसानी से हल्का कर सकते हैं। कैनवास में प्रत्येक बिटमैप को प्रस्तुत करने से पहले यह आपके द्वारा निर्दिष्ट सेटिंग्स के बारे में है।

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

Answer 2

मैं एक अलग, हल्के, खुला स्रोत पुस्तकालय बनाया है एक से दूसरे एचटीएमएल कैनवास संदर्भ से फ़ोटोशॉप शैली मिश्रण मोड प्रदर्शन के लिए: 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 देखें, वर्तमान संस्करण में समर्थित मिश्रण मोड सहित: यहाँ नमूना उपयोग है।