मैं अपने वेबपृष्ठ पर एक लाल आयताकार <div> तत्व रखना चाहता हूं ताकि यह न केवल पारदर्शी दिखाई दे, बल्कि फ़ोटोशॉप के मल्टीप्ली मोड में मिश्रित भी दिखाई दे।क्या फ़ोटोशॉप-जैसी मिश्रण मोड HTML5 में संभव हैं?
<div>position: fixed होता, तो यह नीचे दी गई सामग्री जल्दी से बदल जाएगा।
क्या यह किसी भी HTML5/CSS3/कैनवास/एसवीजी चाल के साथ संभव है?
मैं एक अलग, हल्के, खुला स्रोत पुस्तकालय बनाया है एक से दूसरे एचटीएमएल कैनवास संदर्भ से फ़ोटोशॉप शैली मिश्रण मोड प्रदर्शन के लिए: 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 देखें, वर्तमान में समर्थित मिश्रण मोड सहित: यहाँ नमूना उपयोग है।
आप इस का उपयोग एक से दूसरे कैनवास से गुणा प्रदर्शन करने के लिए सकता है, लेकिन मानक HTML तत्वों खत्म नहीं हुआ।
यह HTML5 नहीं है, लेकिन यह जितना करीब है उतना करीब है जितना आप पूछ रहे हैं।
Javascript blending modes (ओपन)।
मुझे नहीं लगता कि फ़ोटोशॉप की तरह "मिश्रण मोड", सिर्फ शुद्ध एचटीएमएल के साथ नकल करते किया जा सकता है जब तक कि भाषा को दूसरी दिशा में एक तेज मोड़ ले लिया है। लेकिन ऐसा करने का कुछ आसान तरीका देखना अच्छा होगा।
This is the closest I have seen, और हाँ, सभी परिसंपत्तियों कैनवास में रहना होगा। ध्यान दें कि इंटरनेट एक्सप्लोरर संस्करण 9 में कैनवास का समर्थन करना शुरू कर देता है जो अभी तक बाहर नहीं है, इसलिए यदि आपको आईई < 9 का समर्थन करना है तो आपको एक वर्कअराउंड का उपयोग करना होगा।
हाँ पिक्सस्टिक लाइब्रेरी [http://www.pixastic.com] बहुत अच्छी लग रही है। लिंक के लिए धन्यवाद। बीटीडब्ल्यू, आईई 9 मार्च में जारी किया गया था, तो अब एक विकल्प हो सकता है। –
मुझे ऐसा करने में भी बहुत दिलचस्पी है। दृश्य लेआउटर्स के लिए कोड किए गए कई लेआउट इसका इस्तेमाल कर सकते थे। इस धागे की अन्य पोस्टों के अलावा, ऐसा करने का एक तरीका है, वर्तमान में केवल फ़ायरफ़ॉक्स 4 में, ओपनजीएल या कैनवास का उपयोग किए बिना। यह एसवीजी फिल्टर का उपयोग मुश्किल है। इसके अलावा यह वेबकिट और क्रोम से रात की रात भी है, लेकिन मैं अभी तक कुछ भी काम नहीं कर सका।
यहाँ कुछ डेमो और कारण हो सकते हैं:
IMHO कुछ anyware पास मिश्रण करने के लिए मोड बहुत कठिन भी हैं अभी हासिल करने के लिए। feConvolveMatrix, feSpecularLighting, या feColorMatrix पर कोई संदर्भ ढूंढना बहुत मुश्किल है, और उदाहरण मेरे लिए पता लगाना असंभव है। वे काम कर सकते थे लेकिन मुझे नहीं पता कि कैसे।
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
यह एक तरह से बेहतर होगा दृष्टिकोण:
मैं EffectGames suggested की तरह कुछ चाहते हैं। हो सकता है कि गणित में ढंके कुछ निंजा हमें ऐसा करने के लिए एक lib बना सकते हैं।
संपादित करें: बिल्कुल मिश्रण मोड करने के लिए एक आसान एसवीजी स्पेक है। लेकिन कोई ब्राउज़र है कि मैं परीक्षण किया यह काम कर (FF4, IE9, Opera11, वेबकिट रात) है: http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - लेकिन मैं यह भी है कि अगर यह एचटीएमएल-डोम तत्वों में उपयोग करने के लिए संभव हो जाएगा पता नहीं है।
इस डेमो देख सकते हैं: http://media.chikuyonok.ru/canvas-blending/ कैसे कैनवास के साथ यह करने के लिए देखने के लिए।
चेक मोड 'सूत्रों सम्मिश्रण और उन्हें लागू करने के लिए कैसे के लिए स्रोत (फार्मूले ज्यादा pixastic या संदर्भ ब्लेंडर में की तुलना में अधिक पठनीय हैं)।
यह एक अद्भुत डेमो आदमी है! क्या आपने इसे पूरा कर लिया? क्या मैं अपने काम में सामान्य मिश्रण के लिए कोड का उपयोग कर सकता हूं? मैंने लेखक से संपर्क करने के लिए रूट पर जाने का प्रयास किया, लेकिन यह 404 फेंक दिया! –
नहीं, यह मैं नहीं हूं, यह प्रसिद्ध रूसी फ्रंट एंड मैन सर्गेई चिकुओनोक (जेन कोडिंग, बीटीडब्ल्यू के पीछे वाला आदमी) है :) [लेख] में (http://chikuyonok.ru/2011/08/optimize- साथ-कैनवास /) वह डेमो में कोड से मुक्त महसूस करने के लिए कहता है, हालांकि आप [टिप्पणियां] (http://chikuyonok.ru/2011/08/optimize-with-canvas/#comments) के माध्यम से उससे संपर्क कर सकते हैं, या अपने ईमेल के लिए पेज के पाद लेख देखें। –
धन्यवाद दोस्त! मैं उसे मेल करूंगा! कैनवास के लिए उस लेख में बहुत अच्छी चीजें हैं! :) –
नहीं (नहीं मूल रूप से) लेकिन यह जल्दी ही आ रहा है: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
+1; उनके मसौदे का नमूना केवल इतना ही हो सकता है कि मुझे कम अल्फा की उपस्थिति में 100% फ़ोटोशॉप-संगत मिश्रण मोड प्राप्त करने की आवश्यकता हो! (और उम्मीद है कि अंततः लाइब्रेरी की आवश्यकता नहीं होगी।) – Phrogz
यदि आप प्रयोगात्मक वेब प्लेटफ़ॉर्म सुविधाओं को सक्षम करते हैं तो क्रोम बीटा में काम करता है। http://jsfiddle.net/X4GyF/ –
बस रिकॉर्ड के लिए, अब क्रोम, एफएफ और ओपेरा में डिफ़ॉल्ट मोड में – vals
शामिल छवियों और सही प्रभाव आप के बाद कर रहे हैं पर निर्भर करता है, तो आप प्राप्त करने के लिए वांछित छवियों और सीएसएस ढ़ाल के कुछ रचनात्मक लेयरिंग ऐसा करने में सक्षम हो सकता है प्रभावित करते हैं:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
मैं http://canvasquery.com/ में सबसे लोकप्रिय मिश्रण जिम्प/फ़ोटोशॉप कैनवास का उपयोग करने से भी जाना जाता है मोड को लागू किया है लेकिन यह relatime के लिए उपयुक्त नहीं है।
इस कैनवास
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
यह Chrome कैनरी में उतरा है में देशी मिश्रण मोड की शुरूआत के साथ परिवर्तित करें ताकि जल्द ही जारी पहुँचना चाहिए होगा। http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
आप पहले से ही सिर्फ सरल सीएसएस (कोई कैनवास) के साथ इसका इस्तेमाल कर सकते हैं। उदाहरण:
mix-blend-mode: 'multiply'
इंटरनेट एक्सप्लोरर इसका समर्थन नहीं सकता है, लेकिन अन्य ब्राउज़रों से करते हैं।
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
यह कुछ है कि पहले से ही वहाँ है, कैनवास में अधिक सम्मिश्रण पता चलता है। लेकिन, मैं लगता है, मैं कुछ कैनवास नीचे है कि करने के लिए सम्मिश्रण लागू कर सकते हैं, जैसा कि उस खिड़की सामग्री कैप्चर करने कैनवास की आवश्यकता होगी, लेकिन, फ़ायरफ़ॉक्स में कम से कम, जो वेब अनुप्रयोगों के लिए अनुमति नहीं है। –