एक गैर-विनाशकारी और पुन: प्रयोज्य धुंधला / पाले सेओढ़ लिया गिलास प्रभाव कैसे बनाएं?

Question

मैं एक सामान्य धुंधला पृष्ठभूमि कैसे बना सकता हूं जिसका उपयोग नीचे दिए गए उदाहरण के समान कई छवियों पर किया जा सकता है?

मुझे एक सफ़ेद पाले सेओढ़ लिया गिलास की आवश्यकता है, जिसे मैं नियमित चित्रों पर परत करने के लिए उपयोग कर सकता हूँ ताकि उन्हें एक पाले सेओढ़ लिया गिलास का रूप दिया जा सके (जैसे आप लगभग इसके पीछे व्हाट्स बना सकते हैं; कुछ रंग)।

उदाहरण:

^{पूर्ण संकल्प के लिए छवि पर क्लिक करें}

हो सकता है कि बनावट के साथ एक सफेद पृष्ठभूमि (दानेदार बनावट) फिर गॉसियन धुंधला हो जाए और फिर इसे मेरी सभी छवियों पर एक परत के रूप में उपयोग करें।

मुझे पता है कि मैंने ऊपर जो लिंक पोस्ट किया है, वह शायद केवल एक छवि धुंधली है, लेकिन मुझे एक परत की आवश्यकता है जिसे एक iOS परियोजना में पुन: उपयोग किया जा सकता है। इस तरह से यह एक छवि के वर्गों पर एक दृश्य परत का उपयोग किया जा सकता है और छवि को धुंधला दिखाई दे सकता है। हो सकता है कि मुझे यहाँ पर टर्म के रूप में ब्लर का उपयोग नहीं करना चाहिए। मैं पाले सेओढ़ लिया गिलास देखो के लिए देख रहा हूँ।

मैं इस छवि के साथ क्या करने की कोशिश कर रहा हूं, इसे अपने iOS ऐप पर आयात कर इसे एक पृष्ठभूमि का उपयोग कर सकता हूं। फिर जब यह दृश्य अन्य दृश्यों (एक नक्शा दृश्य, एक फोटो, आदि ...) से अधिक होता है, तो वे सभी ठंढ हो जाते हैं। मैं iOS 7 से इस छवि के प्रभाव को बनाने की कोशिश कर रहा हूं। और नहीं, मैं नए iOS 7 डिज़ाइन सुविधाओं का उपयोग नहीं करना चाहता, क्योंकि मेरे अधिकांश उपयोगकर्ता अभी भी iOS 5 पर हैं। और नहीं, मैं उन्हें अपग्रेड करने के लिए मजबूर नहीं करना चाहता।

Comments

"कलंक" कुछ सामान्य बात नहीं है जिसे आप पीएनजी में स्टोर कर सकते हैं, यह एक छवि पर लागू प्रभाव है और पूरी तरह से छवि की सामग्री पर निर्भर है। हालाँकि, आप actionब्लर इफ़ेक्ट लागू कर सकते हैं । यदि आप वह करते हैं जो लिंक किए गए प्रश्नोत्तर पर ट्यूटोरियल और चर्चा में उल्लिखित है , तो कार्रवाई करते समय , आपके पास वह हो सकता है जिसकी आपको आवश्यकता है। सबसे अधिक संभावना है कि एक मैन्युअल रूप से चयन मुखौटा बनाएगा, और फिर एक कार्रवाई का उपयोग करके शेष प्रक्रिया को स्वचालित करेगा।

— क्षितिज

संपादित नहीं वास्तव में सवाल बदल जाता है। इसका उत्तर है, जैसा कि होरेशियो उल्लेख करता है: नहीं, आपके पास एक अलग परत में धब्बा नहीं हो सकता है। IOS इमेज सिर्फ एक बड़ा ब्लर है।

— यिसेला

यदि आप मुझसे पूछें तो यह कोडिंग प्रश्न पर पूर्ण है। निकटतम आप छवियों का उपयोग करके अपने दूसरे उदाहरण की तरह कुछ करने जा रहे हैं यह है: jsfiddle.net/lollero/DE4qn ... बेशक यह सुपर स्टेटिक है और आपको एक ही छवि के 2 संस्करणों की आवश्यकता है (बेशक यह एक ही बात css3 फिल्टर विधि के साथ किया जा सकता है)।

— Joonas

Answer 1

आप केवल एक 'धुंधली' छवि को ओवरले नहीं कर सकते हैं जो इसके पीछे यादृच्छिक छवि को धुंधला करती है। धब्बा प्रभाव को पिक्सेल को स्थानांतरित / फैलाने के लिए छवि को नमूना करने की आवश्यकता होती है, इसलिए इसे वहां लागू करने की आवश्यकता होती है।

आप हालांकि रेतीले / दानेदार बनावट का उपयोग कर सकते हैं और दानेदार बनावट देखने के लिए इसे एक बहु परत के रूप में उपयोग कर सकते हैं।

अद्यतन - जैसा कि डेरेक एक अन्य उत्तर में बताते हैं, आप अपनी छवि परत को एक स्मार्ट ऑब्जेक्ट में परिवर्तित करके एक गैर-विनाशकारी धुंधला बना सकते हैं, फिर उस पर धुंधला लागू करें। फिर आप स्मार्ट ऑब्जेक्ट में प्रवेश कर सकते हैं और उस ब्लर को स्वतंत्र रूप से संपादित कर सकते हैं।

Comments

मैं रेतीले दानेदार बनावट कैसे कर सकता हूं? मैं सोच रहा हूँ कि ये एक साथ काम करेंगे। दो बिल्कुल उसी, लेकिन एक पहले से दाईं ओर एक पिक्सेल ऊपर और एक पिक्सेल है और यह इसे दानेदार बना देगा (यदि आप करेंगे तो स्तरित)।

— jgervin

एक सफेद भरी हुई परत बनाएं और फ़िल्टर करें> शोर> शोर को अनाज जोड़ने के लिए जोड़ें। वहाँ से शायद इसे थोड़ा नरम करने के लिए इसे थोड़ा नरम करें, परत को गुणा के रूप में सेट करें और अपारदर्शिता को 10% की तरह कम करें।

— जॉन

Answer 2

आपके द्वारा प्रदान की गई दूसरी छवि पर एक नज़र डालते हुए, पीएनजी ओवरले के साथ ऐसा कुछ संभव नहीं है। यह बिल्कुल प्रोग्रामेटिक रूप से किया जाता है और पीएनजी ओवरले के साथ नहीं। मैंने यहां पोस्ट किए गए कुछ अन्य सुझावों की कोशिश की है, कोई भी करीब नहीं आया (लेकिन शायद आपके पास बेहतर भाग्य होगा)

---

यह वास्तव में अपनी आवश्यकताओं के बाहर जा रहा है, लेकिन यह करता है एक उपरिशायी के साथ किया जा करने के लिए? मुझे यकीन नहीं है कि आप उस तरह की विधि का उपयोग करके प्राप्त करने की उम्मीद कर रहे हैं। यदि आपके पास क्षमता है, तो मैं इसके बजाय प्रोग्राम करूँगा।

मुझे इस बात की कोई जानकारी नहीं है कि आपका आवेदन कैसे सेट किया गया है, लेकिन एक तरीका यह है कि आप CSS3 फ़िल्टर के साथ कर सकते हैं:

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[स्पष्टता के लिए ध्यान दें: प्रक्रिया एक अल्फा मास्क के साथ उत्पाद की एक अग्रभूमि छवि है, और एक पृष्ठभूमि छवि जो सीएसएस का उपयोग करके धुंधला हो जाती है]

से पहले

बाद

^{चित्र साभार: फिलिप लीरा}

आप इसका लाइव डेमो यहां देख सकते हैं

भविष्य में, प्रस्तावित backdrop-filterसीएसएस शैली का उपयोग करके इसे बहुत आसान बनाया जा सकता है , लेकिन इसके लिए वर्तमान समर्थन गैर-मौजूद है ।

Comments

यदि यह एक विकल्प है, तो उपयोगकर्ता या डेवलपर की इच्छा के अनुसार स्टाइल को बदल सकते हैं।

— क्षितिज

कुछ ध्यान देने योग्य बात यह है कि यह iOS उपकरणों और शायद अधिकांश मोबाइल उपकरणों पर काम करेगा, लेकिन गैर-मोबाइल वेब डिज़ाइन के लिए व्यवहार्य दृष्टिकोण नहीं है क्योंकि इसका समर्थन बेहद सीमित है। caniuse.com/css-filters

— एरिक

हम सभी मूल निवासी हैं। और प्रोग्रामिंग यह एक विकल्प नहीं है क्योंकि इसमें 3 दृश्य दिखाने या 2 या 1 हो सकता है, लेकिन शीर्ष दृश्य को सभी नीचे के दृश्यों को देखने की अनुमति देने की आवश्यकता है, चाहे कुछ भी हो, फेंक फेंकने के लिए।

— jgervin

@jgervin मुझे नहीं लगता कि आप जो हासिल करने की कोशिश कर रहे हैं वह सिर्फ एक PNG ओवरले के साथ संभव है, लेकिन मैं किसी के लिए मुझे गलत साबित करना पसंद करूंगा क्योंकि मैं कुछ नया सीखूंगा! मैं इसके बजाय इस बात पर ध्यान देना चाहता हूं कि आप इसे दूसरे तरीके से कैसे पूरा कर सकते हैं, शायद स्टैक ओवरफ्लो आपको सही दिशा में ले जा सकता है।

— जॉन बी

@ यदि इसका iOS ऐप है, तो वेब प्लेटफॉर्म कोई मायने नहीं रखता।

— Ctrl Alt Design

Answer 3

एक अन्य विकल्प एक स्मार्ट ऑब्जेक्ट बनाना है, और अपने ब्लर्स और प्रभावों को स्मार्ट ऑब्जेक्ट पर लागू करना है। इस तरह से करना, फिर भी आपको स्मार्ट ऑब्जेक्ट को खोलने और उसके अंदर क्या है इसे बदलने देगा।

--- संपादित करें ---

चूंकि मैंने अपना उपरोक्त उत्तर पोस्ट किया है, इसलिए प्रश्न को संपादित किया गया है और थोड़ा बदल दिया गया है। अनुरोध अब एक iOS ऐप में एक धब्बा प्राप्त करना है, मैं कोड के साथ धब्बा करने का सुझाव दूंगा, इस तरह यह किसी भी छवि को प्रभावित कर सकता है जिसे आप पसंद करेंगे।

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

इसके बारे में अधिक जानकारी यहाँ: http://notes.ericwillis.com/2009/10/blur-an-image-with-csp/

Answer 4

फ़ोटोशॉप में ब्लर बनाने के तरीके के बारे में ड्रिबल पर कुछ अच्छे फिल्टर हैं । शायद ये आपके लिए मददगार भी हो सकते हैं। मुझे प्रभाव प्राप्त करने के लिए विशेष रूप से यह गैर-विनाशकारी तरीका पसंद है। मुझे पता है कि इस बारे में पहले से ही कुछ है, लेकिन यहाँ लिंक है:

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Answer 5

यदि यह अभी भी आवश्यक है, तो मैं उसी प्रभाव को प्राप्त करने की कोशिश कर रहा था और मैं नहीं कर सकता था।

मैंने इसे html2canvas और stackBlur नामक एक प्लगइन के साथ किया, जो मुझे यहां मिला: http://jsfiddle.net/WtQjY/201/ ।

मैं प्लगइन्स का लेखक नहीं हूं। और यह केवल कोड का एक स्निपेट है। मैंने इसे सरल और तेज़ होने के लिए बदल दिया:

.blur {
    -webkit- फ़िल्टर: धब्बा (7 पीएक्स);
-मोज़-फ़िल्टर: धब्बा (7 पीएक्स);
-ओ-फ़िल्टर: धब्बा (7 पीएक्स);
-ms-filter: कलंक (7px);
फ़िल्टर: ब्लर (7px);

}

//////////////////////////////////
// jquery पुस्तकालय शामिल हैं
// jQuery
$ (Document) .ready ({
$ ( '# YourButton')। क्लिक करें ({

$ ( '# YourContainer') toggleClass ( 'कलंक')।

});
});

यह अभी भी बहुत धीमा है, लेकिन यह काम करता है।

Answer 6

इसलिए मैंने इस स्क्रिप्ट का अपना संस्करण बनाया जिसे मुझे लगा कि मैं साझा करूँगा। मैंने दो बैकग्राउंड इमेज बनाईं और उनमें से एक को चाइल्ड डिव से जोड़ा और उसके बाद प्राइमरी बैकग्राउंड को क्रिस्प और क्लियर वर्जन दिया। बस दोनों वस्तुओं की पृष्ठभूमि को निर्धारित और केंद्रित करें और वे मेल खाएंगे।

यहाँ एक डेमो है: http://www.palandforsale.us/frosted-glass/

Comments

डेमो पेज नीचे लगता है। क्या डेमो किसी अन्य जगह पर पाया जा सकता है, या क्या इसका एक JSFiddle बनाना संभव है?

— प्रैक्सिस असिलिन

Answer 7

अगर मैं आपके प्रश्न को सही ढंग से समझूं, तो मुझे नहीं लगता कि आप कर सकते हैं। 'ब्लर' एक ऐसा ऑपरेशन है जिसे सॉफ्टवेयर के एक टुकड़े में अंजाम दिया जाता है, प्रत्येक को अपने तरीके से। फ़ोटोशॉप या Google क्रोम कैसे करते हैं, इसके मुकाबले स्केच कैसे लागू होता है?

इसलिए, आप 'कलंक' के साथ एक छवि निर्यात नहीं कर सकते। ब्लर हमेशा इसके पीछे क्या है के साथ बातचीत में है, और इसे उस एप्लिकेशन से निर्यात नहीं किया जा सकता है जिसे आप इसे बना रहे हैं।

Comments

जवाब के लिए थैंक्स, यह समझ में आता है। इसलिए अगर मैं इसे एप्लिकेशन में उपयोग करना चाहता हूं तो मुझे इसे प्रोग्रामेटिक रूप से बनाना होगा।

— दिलीप

हां, प्रत्येक आवेदन के लिए अलग से। उदाहरण के लिए सीएसएस में इन दिनों ब्लर विकल्प हैं।

— विंसेंट

Answer 8

1. जिस परत को आप धुंधली और पाले सेओढ़ लेना चाहते हैं, उस परत पर 50% ग्रे लेयर बनाएं।
2. इसे शोर से भरें, जिसकी मात्रा आपकी आवश्यकता पर निर्भर करती है
3. अपनी जरूरत के अनुसार इसे गाऊसी ब्लर से ब्लर करें।
4. इस लेयर के ऊपर आप एक कर्व्स लेयर जोड़ सकते हैं और व्हाइट एंड ब्लैक वैल्यूज़ को एडजस्ट करके व्हाइट एंड को नीचे खींच सकते हैं या कर्व्स लेयर के ब्लैक एंड को पुश कर सकते हैं।

इन दो परतों को एक ठंढा और धुंधला प्रभाव देना चाहिए। इन दोनों परतों के क्रम को बदला जा सकता है।

Comments

नमस्ते। यदि आपने यह कोशिश की है, तो क्या आप परिणाम की तस्वीर जोड़ सकते हैं? मैं वास्तव में यह नहीं देख पा रहा हूं कि यह कैसे एक धब्बा प्रभाव देगा जैसे कि ओपी छवि के रंगों को प्रभावित किए बिना देख रहा है ...

— यिशेला

यह आपको मूल तेज छवि पर धुंधली धुंध देगा।

— DA01

काम नहीं किया। लेकिन शायद मैंने गलत किया।

— jgervin

Answer 9

एक ऐसी कार्रवाई बनाएं जो छवि को डुप्लिकेट करती है और एक गाऊसी धब्बा लागू करती है। मेरा ऐसा करने का यह एकमात्र पीएस तरीका है।