दिलचस्प पोस्ट
Fs.readFile से डेटा प्राप्त करें क्या मेयर्स का सिंगलटन पैटर्न थ्रेड सुरक्षित है? डेटाबेस तालिका के लिए सबसे अच्छा डिजाइन क्या है जिसे दो अलग-अलग संसाधनों के स्वामित्व में रखा जा सकता है, और इसलिए दो अलग-अलग विदेशी कुंजी की आवश्यकता है? जावास्क्रिप्ट: क्लाइंट साइड बनाम सर्वर साइड सत्यापन MVVM पासिंग इवेंटएआरजीज़ कमान पैरामीटर के रूप में क्यों नहीं एक जावा। लंग.अरेरे वर्ग है? अगर एक जावा सरणी एक ऑब्जेक्ट है, तो क्या वह ऑब्जेक्ट का विस्तार नहीं करेगी? Django: सहेजे जाने पर, आप कैसे जांच सकते हैं कि कोई फ़ील्ड बदल गया है? एक Django प्रपत्र में, मैं एक फ़ील्ड को केवल पढ़ने के लिए (या अक्षम) कैसे कर सकता हूं ताकि इसे संपादित नहीं किया जा सके? क्या जावा में एक एनोटेशन के मूल्य को पढ़ना संभव है? सर्वश्रेष्ठ जावास्क्रिप्ट कम्प्रेसर क्यों 0.1f से 0 को 10x से नीचे प्रदर्शन धीमा कर देता है? Servlets और Ajax का उपयोग कैसे करें? सांख्यिकीय विश्लेषण और रिपोर्ट लेखन के लिए कार्यप्रवाह एंड्रॉइड पर किसी अन्य एप्लिकेशन से एप्लिकेशन लॉन्च करें पृष्ठभूमि-रंग के आधार पर सीएसएस फ़ॉन्ट-रंग को उलटा दें

एचटीएमएल / सीएसएस में ग्रेस्केल में एक छवि को परिवर्तित करें

क्या सिर्फ HTML/CSS साथ ग्रेस्केल में एक रंग बिटमैप प्रदर्शित करने का एक आसान तरीका है?

इसे IE- संगत (और मुझे लगता है कि यह नहीं होगा) की आवश्यकता नहीं है – अगर यह एफएफ 3 और / या एसएफ 3 में काम करता है, तो मेरे लिए यह काफी अच्छा है

मुझे पता है कि मैं इसे SVG और कैनवस दोनों के साथ कर सकता हूं, लेकिन यह अभी बहुत काम जैसा लगता है

क्या ऐसा करने के लिए वास्तव में आलसी व्यक्ति का रास्ता है?

वेब के समाधान से एकत्रित समाधान "एचटीएमएल / सीएसएस में ग्रेस्केल में एक छवि को परिवर्तित करें"

सीएसएस फिल्टर के लिए समर्थन वेबकिट में उतरा है। इसलिए हमारे पास अब एक क्रॉस-ब्राउज़र समाधान है।

 img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } /* Disable grayscale on hover */ img:hover { -webkit-filter: grayscale(0); filter: none; } 
 <img src="http://lorempixel.com/400/200/"> 

Brillout.com के उत्तर के बाद , और रोमन नूरिक का उत्तर भी, और कुछ हद तक 'नहीं एसवीजी' की आवश्यकता को आराम करने के लिए, आप फ़ायरफ़ॉक्स में छवियों को केवल एक एकल एसवीजी फ़ाइल और कुछ सीएसएस का इस्तेमाल कर सकते हैं।

आपकी एसवीजी फाइल इस तरह दिखाई देगी:

 <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> 

इसे संसाधनों के रूप में सहेजें। एसवीजी, इसे अब किसी भी छवि के लिए पुन: उपयोग किया जा सकता है जिसे आप ग्रेस्केल में बदलना चाहते हैं।

आपके सीएसएस में आप फ़ायरफ़ॉक्स विशिष्ट filter संपत्ति का उपयोग कर फ़िल्टर का संदर्भ देते हैं:

 .target { filter: url(resources.svg#desaturate); } 

यदि आप इसे पसंद करते हैं, तो भी एमएस स्वामित्व वाले व्यक्ति को जोड़ें, उस वर्ग को किसी भी छवि को लागू करें जिसे आप ग्रेस्केल में परिवर्तित करना चाहते हैं (फ़ायरफ़ॉक्स> 3.5, IE8 में काम करता है)

संपादित करें : यहां एक अच्छा ब्लॉग पोस्ट है जो सल्मन पीके के उत्तर में नई CSS3 filter संपत्ति का उपयोग करते हुए वर्णित एसवीजी दृष्टिकोण के साथ जुड़ा हुआ है। उस दृष्टिकोण का उपयोग करना आपको कुछ पसंद है:

 img.desaturate{ filter: gray; /* IE */ -webkit-filter: grayscale(1); /* Old WebKit */ -webkit-filter: grayscale(100%); /* New WebKit */ filter: url(resources.svg#desaturate); /* older Firefox */ filter: grayscale(100%); /* Current draft standard */ } 

इसके अलावा ब्राउज़र समर्थन जानकारी यहाँ ।

फ़ायरफ़ॉक्स के लिए आपको एक फिल्टर.svg फ़ाइल बनाने की आवश्यकता नहीं है, आप डेटा यूआरआई स्कीम का उपयोग कर सकते हैं।

पहला जवाब देने के सीएसएस कोड को देता है:

 filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; /* IE6+ */ 

अपनी फ़ाइल एन्कोडिंग द्वारा "utf-8" स्ट्रिंग को बदलने के लिए ध्यान रखना।

यह विधि दूसरे की तुलना में तेज़ होनी चाहिए क्योंकि ब्राउज़र को दूसरी HTTP अनुरोध करने की आवश्यकता नहीं होगी।

अद्यतन: मैंने इसे एक पूर्ण GitHub रेपो में बनाया, जिसमें IE10 और IE11 के लिए जावास्क्रिप्ट पॉलीफ़िल शामिल हैं: https://github.com/karlhorky/gray

मैं मूल रूप से सलमान पीके के उत्तर का इस्तेमाल करता था , लेकिन फिर एसवीजी फ़ाइल के लिए आवश्यक अतिरिक्त HTTP अनुरोध को खत्म करने के लिए नीचे भिन्नता का निर्माण किया। इनलाइन एसवीजी फ़ायरफ़ॉक्स के संस्करण 10 और उसके बाद के संस्करण में काम करता है, और 10 से कम संस्करण वाले वैश्विक ब्राउज़र बाजार में भी 1% के लिए खाता नहीं है।

मैं तब से इस ब्लॉग पोस्ट पर अपडेट किए गए समाधान को रखता रहा हूं, रंग में लौट रहा है, एसईजी के साथ IE 10/11 समर्थन और डेमो में आंशिक ग्रेस्केल का समर्थन करता है।

 img.grayscale { /* Firefox 10+, Firefox on Android */ filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* IE 6-9 */ filter: gray; /* Chrome 19+, Safari 6+, Safari 6+ iOS */ -webkit-filter: grayscale(100%); } img.grayscale.disabled { filter: none; -webkit-filter: grayscale(0%); } 

यदि आप जावास्क्रिप्ट का उपयोग करने में सक्षम हैं, तो यह स्क्रिप्ट आपके लिए क्या हो सकता है। यह क्रॉस ब्राउज़र काम करता है और अब तक मेरे लिए ठीक काम कर रहा है। आप इसे किसी भिन्न डोमेन से लोड की गई छवियों के साथ उपयोग नहीं कर सकते।

http://james.padolsey.com/demos/grayscale/

आज ही समस्या आज मिल गई है मैंने शुरू में सलमान पीके समाधान का उपयोग किया है लेकिन पता चला कि प्रभाव एफएफ और अन्य ब्राउज़रों के बीच अलग है ऐसा इसलिए है क्योंकि रूपांतरण मैट्रिक्स लाइटनेस पर काम करता है, केवल क्रोम / आईई में फिल्टर की तरह चमक नहीं। मुझे आश्चर्य है कि एसवीजी में वैकल्पिक और सरल समाधान भी एफएफ 4 + में काम करता है और बेहतर परिणाम पैदा करता है:

 <svg xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0"/> </filter> </svg> 

सीएसएस के साथ:

 img { filter: url(filters.svg#desaturate); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ } 

एक और चेतावनी यह है कि IE10 "फ़िल्टर: ग्रे:" का समर्थन नहीं करता है मानकों के अनुरूप मोड में, इसलिए काम करने के लिए हेडर में संगतता मोड स्विच की आवश्यकता है:

 <meta http-equiv="X-UA-Compatible" content="IE=9" /> 

ऐसा लगता है कि यह संभव नहीं है (फिर भी), यहां तक ​​कि CSS3 या मालिकाना- -webkit- या -moz- सीएसएस गुणों के साथ भी।

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

उन लोगों के लिए जो अन्य उत्तरों में अनदेखी IE10 + समर्थन के बारे में पूछ रहे हैं, इस सीएसएस का टुकड़ा चेक करें:

 img.grayscale:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); } svg { background:url(http://img.hiwab.com/css/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); } svg image:hover { opacity: 0; } 

इस मार्कअप पर लागू:

 <!DOCTYPE HTML> <html> <head> <title>Grayscaling in Internet Explorer 10+</title> </head> <body> <p>IE10 with inline SVG</p> <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"> <defs> <filter id="filtersPicture"> <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> </filter> </defs> <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://img.hiwab.com/css/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" /> </svg> </body> </html> 

अधिक जनसँख्या के लिए, जांचकर्ता आईई टेस्टस्ट्रive के CSS3 ग्राफिक्स अनुभाग और इस पुराने IE ब्लॉग http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

इंटरनेट एक्सप्लोरर में फ़िल्टर गुण का उपयोग करें

वेबकिट और फ़ायरफ़ॉक्स में वर्तमान में सीएसएस के साथ एक छवि को हटाने का कोई रास्ता नहीं है। इसलिए आपको एक ग्राहक पक्ष समाधान के लिए कैनवास या एसवीजी का उपयोग करना होगा।

लेकिन मुझे लगता है कि एसवीजी का उपयोग करना अधिक सुरुचिपूर्ण है। एसवीजी समाधान के लिए मेरा ब्लॉग पोस्ट देखें जो फ़ायरफ़ॉक्स और वेबकीट दोनों के लिए काम करता है: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

और सख्ती से बोलने के बाद से एसवीजी एचटीएमएल का समाधान शुद्ध एचटीएमएल + सीएसएस है 🙂

ऐसा करने का एक नया तरीका कुछ समय के लिए आधुनिक ब्राउज़र पर उपलब्ध है।

पृष्ठभूमि-ब्लेंड-मोड आपको कुछ रोचक प्रभाव पाने की अनुमति देता है, और उनमें से एक रूपांतरण में ग्रेस्केल है

मूल्य चमक , एक सफेद पृष्ठभूमि पर सेट, यह अनुमति देता है। (इसे ग्रे में देखने के लिए हॉवर करें)

 .test { width: 300px; height: 200px; background: url("http://placekitten.com/1000/750"), white; background-size: cover; } .test:hover { background-blend-mode: luminosity; } 
 <div class="test"></div> 

शायद इस तरह आपकी मदद

 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 

w3schools.org

यह वास्तव में IE के साथ ऐसा करने में आसान है अगर मुझे एक स्वामित्व सीएसएस गुण का उपयोग सही ढंग से याद है इस FILTER: Gray आज़माएं FILTER: Gray http://www.ssi-developer.net/css/visual-filters.shtml से FILTER: Gray

एक्स द्वारा की गई विधि बस छवि को पारदर्शी बनाता है और इसके पीछे एक काली पृष्ठभूमि है। मुझे यकीन है कि आप यह तर्क दे सकते हैं कि यह ग्रेस्केल है

यद्यपि आप जावास्क्रिप्ट का उपयोग नहीं करना चाहते थे, मुझे लगता है कि आपको इसका उपयोग करना होगा। आप ऐसा करने के लिए एक सर्वर साइड भाषा भी इस्तेमाल कर सकते हैं

यदि आप जावास्क्रिप्ट का उपयोग करने के लिए तैयार हैं, तो आप छवि को ग्रेस्केल में कनवर्ट करने के लिए कैनवास का उपयोग कर सकते हैं। फ़ायरफ़ॉक्स और सफ़ारी समर्थन <canvas> , यह काम करना चाहिए।

इसलिए मैंने "कैनवास ग्रेस्केल" को गॉगल किया, और पहला परिणाम http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html जो काम करने लगता है

वेबकिट में मूल सीएसएस फ़िल्टर के लिए समर्थन मौजूदा संस्करण से जोड़ा गया है 1 9.0.1084.46

इसलिए -विबकिट-फिल्टर: ग्रेस्केल (1) काम करेगा और जो वेबकिट के लिए एसवीजी दृष्टिकोण से आसान है …

यहाँ कम से कम एक मिश्रण है जो आपको किसी अस्पष्टता को चुनने देगा। भिन्न प्रतिशत पर सादे सीएसएस के लिए खुद को चर में भरें

यहां एक साफ संकेत है , यह मैट्रिक्स के लिए संतृप्त प्रकार का उपयोग करता है ताकि आपको प्रतिशत बदलने के लिए कुछ भी करने की आवश्यकता न हो।

 .saturate(@value:0) { @percent: percentage(@value); filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: grayscale(@percent); /* Current draft standard */ -webkit-filter: grayscale(@percent); /* New WebKit */ -moz-filter: grayscale(@percent); -ms-filter: grayscale(@percent); -o-filter: grayscale(@percent); } 

फिर इसका उपयोग करें:

 img.desaturate { transition: all 0.2s linear; .saturate(0); &:hover { .saturate(1); } } 

आपको पूर्ण उपयोग के लिए बहुत सारे उपसर्ग का उपयोग करने की आवश्यकता नहीं है, क्योंकि अगर आप पुराने फ़ायरफ़ॉक्स के लिए उपसर्ग चुनते हैं, तो आपको नए फ़ायरफ़ॉक्स के लिए उपसर्ग का उपयोग करने की आवश्यकता नहीं है।

तो पूर्ण उपयोग के लिए, पर्याप्त इस कोड का उपयोग करें:

 img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } img.grayscale.disabled { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: none; -webkit-filter: grayscale(0%); } 

ऐसा करने का सबसे सरल तरीका

 img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); 

}

रोबर्ट के उत्तर के आधार पर:

इस तरह मैट्रिक्स का उपयोग करने के बजाय रंग की छवि से ग्रेज़ स्केल छवि में उचित रूपांतरण प्राप्त करने के लिए:

 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 

आपको इस तरह रूपांतरण मैट्रिक्स का उपयोग करना चाहिए:

 0.299 0.299 0.299 0 0.587 0.587 0.587 0 0.112 0.112 0.112 0 0 0 0 1 

यह आरजीबीए (लाल-हरा-नीला-अल्फा) मॉडल पर आधारित सभी प्रकार की छवियों के लिए ठीक काम करना चाहिए।

अधिक जानकारी के लिए आपको मैट्रिक्स का उपयोग क्यों करना चाहिए मैंने अधिक संभावना पोस्ट की है कि रॉबर्ट का एक निम्न लिंक जांचता है:

  • चमक और रंग अंतर संकेत
  • प्रश्न के लिए मार्गस का जवाब: "ग्रेविस्कलावल्यू इन कलरवल्यू" @स्टेकॉवरफ्लो भाग: 2 संपादित करें: हंस पैसेंट
  • चार्ल्स ए। ब्यूमैन – पर्ड्यू विश्वविद्यालय – एनालॉग टीवी पेज 20 और 21
  • और यहां आपको कुछ सी # और वीबी कोड मिल सकते हैं

दूसरे के जवाबों के पूरक के रूप में, एसवीजी के मैट्रिक्स के सिरदर्द के बिना एफएफ पर एक आधे रास्ते पर आना संभव है:

 <feColorMatrix type="saturate" values="$v" /> 

जहां $v 0 और 1 बीच है यह filter:grayscale(50%); के बराबर है filter:grayscale(50%);

लाइव उदाहरण:

 .desaturate { filter: url("#desaturate"); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: "Helvetica"; } 
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0.4"/> </filter> </svg> <figure> <figcaption>Original</figcaption> <img src="http://www.placecage.com/c/500/200"/> </figure> <figure> <figcaption>Half grayed</figcaption> <img class="desaturate" src="http://www.placecage.com/c/500/200"/> </figure> 

एक भयानक लेकिन व्यावहारिक समाधान: एक फ्लैश ऑब्जेक्ट का उपयोग करके छवि को रेंडर करें, जिससे आप फ़्लैश में संभवतः सभी परिवर्तनों को प्रदान कर सकते हैं।

यदि आपके उपयोगकर्ता खून बह रहा-किनारे ब्राउज़रों का उपयोग कर रहे हैं और यदि फ़ायरफ़ॉक्स 3.5 और सफारी 4 का समर्थन करता है (मुझे नहीं पता कि ये भी करते हैं / होगा), तो आप छवि के सीएसएस रंग-प्रोफ़ाइल विशेषता को समायोजित कर सकते हैं, इसे आईएससी के ग्रेस्केल में सेट कर सकते हैं प्रोफाइल यूआरएल। लेकिन यह बहुत है अगर!

हो सकता है पुराने ब्राउज़र का एक विकल्प छद्म तत्वों या इनलाइन टैग द्वारा उत्पादित मुखौटा का उपयोग करना हो सकता है।

संपूर्ण पोजिशनिंग एक आईएमजी (या टेक्स्ट एरिया जिसे कोई क्लिक या चयन की आवश्यकता नहीं होती है) को रंगीन स्केल के प्रभाव की नकल कर सकते हैं, आरजीबीए () या ट्रांसक्रिस पेंग के माध्यम से

यह एक सिंगल कलर स्केल नहीं देगा, लेकिन रंगों का रंग सीमा से बाहर होगा

छद्म तत्व के माध्यम से 10 अलग-अलग रंगों के साथ कोड पेन पर परीक्षण करें, आख़िरी ग्रे है http://codepen.io/gcyrillus/pen/nqpDd (दूसरी छवि पर स्विच करने के लिए पुनः लोड करें)

आप jFunc के कार्यों में से एक का उपयोग कर सकते हैं – फ़ंक्शन "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx का उपयोग करें

इस jquery प्लगइन की कोशिश करो यद्यपि, यह एक शुद्ध HTML और सीएसएस समाधान नहीं है, लेकिन यह आप को क्या हासिल करना है, यह एक आलसी तरीका है। आप अपने greyscale को कस्टमाइज़ कर सकते हैं ताकि आपके उपयोग का सबसे अच्छा उपयोग किया जा सके। इसे का पालन करें:

 $("#myImageID").tancolor(); 

एक इंटरैक्टिव डेमो है आप इसके साथ खेल सकते हैं।

उपयोग के बारे में दस्तावेज़ीकरण देखें, यह बहुत आसान है। डॉक्स

अगर आप, या किसी और को भविष्य में ऐसी ही समस्या का सामना करना पड़ रहा है तो PHP के लिए खुला है। (मुझे पता है कि आपने एचटीएमएल / सीएसएस कहा है, लेकिन हो सकता है कि आप बैकएंड में पहले ही PHP का इस्तेमाल कर रहे हों) यहां एक PHP समाधान है:

मुझे इसे PHP जीडी पुस्तकालय से मिला है और इस प्रक्रिया को स्वचालित करने के लिए कुछ चर जोड़ दिया गया है …

 <?php $img = @imagecreatefromgif("php.gif"); if ($img) $img_height = imagesy($img); if ($img) $img_width = imagesx($img); // Create image instances $dest = imagecreatefromgif('php.gif'); $src = imagecreatefromgif('php.gif'); // Copy and merge - Gray = 20% imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20); // Output and free from memory header('Content-Type: image/gif'); imagegif($dest); imagedestroy($dest); imagedestroy($src); ?> 

फ़ायरफ़ॉक्स में एक प्रतिशत के रूप में ग्रेस्केल के लिए, उसके बजाय संतृप्त फ़िल्टर का उपयोग करें: ('संतृप्त' के लिए खोज करें)

 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"