छवि सीएसएस/जावास्क्रिप्ट के साथ धुंधला: क्या यह संभव है?

Question

क्या सीएसएस और जावास्क्रिप्ट का उपयोग कर किसी छवि पर धुंध प्रभाव जोड़ना संभव है?

Answer 1

हाँ, this works a treat:

Pixastic एक प्रयोगात्मक पुस्तकालय जो आप जावास्क्रिप्ट की सिर्फ एक बिट का उपयोग कर छवियों पर कार्रवाई की एक किस्म प्रदर्शन करने के लिए अनुमति देता है। बॉक्स के बाहर समर्थित प्रभावों में विलुप्त होने/ग्रेस्केल, उलटा, फ़्लिपिंग, चमक/कंट्रास्ट एडजस्टमेंट, ह्यू/संतृप्ति, एम्बॉस, ब्लर, और कई और ...

एचटीएमएल 5 कैनवास तत्व का उपयोग करके पिक्सस्टिक काम करता है जो पहुंच प्रदान करता है कच्चे पिक्सेल डेटा के लिए, जिससे अधिक उन्नत छवि प्रभावों के लिए खुलता है। यह वह जगह है जहां "प्रयोगात्मक" हिस्सा खेल में आता है। कैनवास केवल कुछ ब्राउज़रों द्वारा समर्थित है और दुर्भाग्यवश इंटरनेट एक्सप्लोरर उनमें से एक नहीं है। हालांकि यह फ़ायरफ़ॉक्स और ओपेरा दोनों में अच्छी तरह से समर्थित है और सफारी के लिए समर्थन केवल हाल ही में सफारी 4 (बीटा) रिलीज के साथ पहुंचा है। क्रोम वर्तमान में देव चैनल में काम करता है। पुराने प्रोप्रायटरी फिल्टर का उपयोग कर आईई में कुछ प्रभाव सिमुलेट किए गए हैं। हालांकि ये फ़िल्टर उनके कैनवास दोस्तों की तुलना में बहुत तेज़ हैं, लेकिन वे कम और सीमित हैं। उम्मीद है कि हम एक दिन IE पर साथ ही वास्तविक कैनवास होगा ...

Answer 2

वैकल्पिक रूप से आप StackBlur या Superfast Blur

Answer 3

इस्तेमाल कर सकते हैं यह भी विचार करने के लिए अच्छा है:

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Answer 4

CSS3 के साथ हम आसानी से एक छवि समायोजित कर सकते हैं। लेकिन याद रखें कि यह छवि को नहीं बदलता है। यह केवल समायोजित छवि प्रदर्शित करता है। क्रोम

लिए

लाइव डेमो और यहाँ

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

पूरा स्रोत कोड अधिक जानकारी के लिए निम्न कोड देखें।

img { 
-webkit-filter: sepia(100%); 
} 

चमक को समायोजित करने के लिए::

img { 
-webkit-filter: grayscale(100%); 
} 

एक सेपिया रूप देने के लिए:

एक छवि ग्रे बनाने के

img { 
-webkit-filter: brightness(50%); 
} 

समायोजित करने के लिए इसके विपरीत:

img { 
-webkit-filter: contrast(200%); 
} 

एक छवि को धुंधला करने के लिए:

img { 
-webkit-filter: blur(10px); 
} 

Answer 5

StackBlur काम करता है: यहाँ मैं इसे कैसे उपयोग कर रहा हूँ है: भी, सभी ब्राउज़रों और iPad पर काम करता है !! वेबकिट के विपरीत !!

डाउनलोड StackBlur v5।0 यहाँ से: StackBlurv5.0

एचटीएमएल

<CANVAS ID="top"></CANVAS> 
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT> 

सीएसएस

#top {      
    border-radius:   28%; 
    -o-border-radius:  28%; 
    -webkit-border-radius: 28%; 
    -moz-border-radius: 28%; 
    position: absolute; 
    top: -2px; 
    left: -2px; 
    z-index: 40; 
    width: 208px; 
    height: 208px; 
} 

जे एस

var topCan = document.getElementById("top"); 
var toptx = topCan.getContext("2d"); 
toptx.drawImage(_specimenImage, 0, 0); 
var blur = 0; 

blur  = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                //based on a new slider position 

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur); 

नोट: stackBlurCanvasRGB समारोह रेंज कर सकते हैं के लिए त्रिज्या मूल्यों मैं 100 लगता है से करने के लिए - 100 .. बस मूल्यों के साथ खेलते हैं, आप इसे काम करेंगे। .. कनवसआरबीबी आईपैड पर कैनवास आरजीबीए से तेज़ी से काम करता है .. कम से कम मैं आईपैड 4 वें जीन पर देख रहा हूं।

Answer 6

सीएसएस

.cbp-rfgrid li:hover img { 
-webkit-filter: blur(2px); 
-moz-filter: blur(2px); 
filter: blur(2px); 
}