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




image css3 (21)

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

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

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

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


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

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"

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

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

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

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>

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

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

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

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

संपादित करें : यहां एक अच्छा ब्लॉग पोस्ट है जो यहां वर्णित एसवीजी दृष्टिकोण के साथ संगीत कार्यक्रम में सलमानपीके के उत्तर में नई 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 */
}

यहां आगे ब्राउज़र समर्थन जानकारी


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

?>

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

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

एमडीएन पर संदर्भ


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

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

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

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

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


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

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


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

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

w3schools.org


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


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


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

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


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

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

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

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


यदि मैं मालिकाना सीएसएस संपत्ति का सही उपयोग कर रहा हूं तो इसे आईई के साथ करना वास्तव में आसान है। इस FILTER: Gray आजमाएं FILTER: Gray http://www.ssi-developer.net/css/visual-filters.shtml से FILTER: Gray

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

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


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

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


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

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

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

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

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


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

पूर्ण स्थिति एक आईएमजी होवर (या पाठ क्षेत्र जिसमें कोई क्लिक और न ही चयन की आवश्यकता होती है) rgba () या translucide png के माध्यम से रंग स्केल के प्रभावों की बारीकी से नकल कर सकते हैं।

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

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


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

विशेष रूप से filter संपत्ति के माध्यम से सीएसएस के साथ ग्रेस्केल प्राप्त करने का सबसे आसान तरीका है।

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

संपत्ति अभी भी पूरी तरह से समर्थित नहीं है और अभी भी सभी ब्राउज़रों में समर्थन के लिए -webkit-filter गुण की आवश्यकता है।


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

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


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

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 जैसे पॉलीफिल का उपयोग कर सकते हैं।





grayscale