css - एचटीएमएल/सीएसएस में एक छवि को ग्रेस्केल में कनवर्ट करें




image css3 (18)

आज एक ही समस्या है। मैंने शुरुआत में सलमानपीके समाधान का उपयोग किया है लेकिन पाया कि प्रभाव एफएफ और अन्य ब्राउज़रों के बीच अलग है। इसका कारण यह है कि रूपांतरण मैट्रिक्स हल्केपन पर काम करता है केवल क्रोम / आईई में फ़िल्टर की तरह चमक नहीं। मेरे आश्चर्य के लिए मुझे पता चला है कि एसवीजी में वैकल्पिक और सरल समाधान भी एफएफ 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+ */
}

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

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

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

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

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

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


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


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

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

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

और सख्ती से बोलते हुए एसवीजी एचटीएमएल है समाधान समाधान एचटीएमएल + सीएसएस है :-)


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

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

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

उपयोग पर प्रलेखन देखें, यह बहुत आसान है। docs


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

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


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

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

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

.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>

चमक से छवि को लिया जाता है, रंग पृष्ठभूमि से लिया जाता है। चूंकि यह हमेशा सफेद होता है, वहां कोई रंग नहीं होता है।

लेकिन यह बहुत अधिक अनुमति देता है।

आप 3 परतों को प्रभाव सेटिंग एनिमेट कर सकते हैं। पहला व्यक्ति छवि होगी, और दूसरा एक सफेद-काला ढाल होगा। यदि आप इस पर एक गुणा मिश्रण मोड लागू करते हैं, तो आपको सफेद भाग पर पहले के रूप में एक सफेद परिणाम मिलेगा, लेकिन काले भाग पर मूल छवि (सफेद द्वारा गुणा करके सफेद देता है, काले रंग से गुणा करने से कोई प्रभाव नहीं पड़ता है।)

ढाल के सफेद हिस्से पर, आपको पहले जैसा ही प्रभाव मिलता है। ढाल के काले हिस्से पर, आप छवि को स्वयं पर मिश्रित कर रहे हैं, और परिणाम असम्बद्ध छवि है।

अब, यह आवश्यक है कि इस प्रभाव को गतिशील बनाने के लिए ढाल को स्थानांतरित करें: (इसे रंग में देखने के लिए होवर करें)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>

reference

संगतता मैट्रिक्स


फ़ायरफ़ॉक्स के लिए आपको filter.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 अनुरोध करने की आवश्यकता नहीं होगी।


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

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"

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

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


यदि आप, या भविष्य में ऐसी ही समस्या का सामना करने वाले किसी और को 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);

?>

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

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


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

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

.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);
    }
}

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

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


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

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

w3schools.org


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

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/">

इंटरनेट एक्सप्लोरर 10 के बारे में क्या?

आप gray जैसे पॉलीफिल का उपयोग कर सकते हैं।


अपडेट करें: मैंने इसे एक पूर्ण गिटहब रेपो में बनाया है, जिसमें आईई 10 और आईई 11 के लिए जावास्क्रिप्ट पॉलीफिल शामिल है: gray

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

मैं तब से इस ब्लॉग पोस्ट पर समाधान को अद्यतन रख रहा हूं, रंग में वापस लुप्त होने के लिए समर्थन जोड़ रहा हूं, आईवी 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%);
}

रॉबर्ट के जवाब के आधार पर:

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

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

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

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


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




grayscale