सीएसएस फिल्टर: पारदर्शिता सफेद के साथ रंग छवि बनाते हैं

Question

मेरे पास पारदर्शिता के साथ एक रंगीन png छवि है। मैं पूरी छवि को सफेद बनाने के लिए सीएसएस फिल्टर का उपयोग करना चाहता हूं, लेकिन पारदर्शिता को छोड़ दें। क्या सीएसएस में यह संभव है?

Comments

आप कोशिश कर सकते हैं filter। यह वर्तमान में केवल वेबकिट ब्राउज़र पर समर्थित है, हालाँकि।

— ओरिऑल

मुझे पता है कि मैं फ़िल्टर की कोशिश कर सकता हूं, लेकिन मुझे किस फ़िल्टर का उपयोग करना चाहिए? मैं सटीक सीएसएस कोड देखना चाहूंगा।

— पास्कल क्लेन

jsfiddle.net/Paulie_D/zAh8a/3

— Paulie_D

Answer 1

आप उपयोग कर सकते हैं

filter: brightness(0) invert(1);

html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

<p>
  Original:
  <img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>

प्रथम, brightness(0) पारदर्शी भागों को छोड़कर सभी छवि को काला बनाता है, जो पारदर्शी रहता है।

फिर, invert(1)काले भागों को सफेद बनाता है।

Comments

@ DanielPerván यह layout.css.filters.enabledसेट पर फ़ायरफ़ॉक्स 34 पर काम करता है true।

— ओरियल

@Gor सैद्धांतिक रूप से यह होना चाहिए brightness(infinity)। लेकिन व्यवहार brightness(10000%)में ग्रे के परिणामस्वरूप पर्याप्त हैcontrast(0)

— ओरोल

@ ओरियल 200 आईक्यू डेवलपर

— मैक्सपज

60.0.1 (जून 2018) तक फ़ायरफ़ॉक्स के साथ बॉक्स से बाहर काम करता है

— Sablefoste

@MahmudulHaque आप 2014 से एक टिप्पणी का जवाब दे रहे हैं। उन वर्षों में फ़ायरफ़ॉक्स और IE के 33 प्रमुख संस्करण आए हैं और अनिवार्य रूप से मृत होने के लिए दुनिया के दूसरे सबसे लोकप्रिय ब्राउज़र से चले गए हैं।

— डैनियल पेरवान

Answer 2

मेरी जानकारी के लिए, एक तत्व को रंगीन करने के लिए दुख की बात है कि कोई सीएसएस फ़िल्टर नहीं है (शायद कुछ एसवीजी फिल्टर जादू के उपयोग के साथ, लेकिन मैं उससे कुछ अपरिचित हूं) और यहां तक ​​कि अगर मामला नहीं था, तो फिल्टर मूल रूप से केवल समर्थित हैं वेबकिट ब्राउज़र।

उस के साथ, आप अभी भी इसके चारों ओर काम कर सकते हैं और canvasअपनी छवि को संशोधित करने के लिए उपयोग कर सकते हैं। मूल रूप से, आप एक कैनवास पर एक छवि तत्व खींच सकते हैं और फिर पिक्सेल के माध्यम से लूप कर सकते हैं, संबंधित आरजीबीए मूल्यों को आपके इच्छित रंग में संशोधित कर सकते हैं।

हालांकि, कैनवस कुछ प्रतिबंधों के साथ आते हैं। सबसे महत्वपूर्ण बात, आपको यह सुनिश्चित करना होगा कि छवि src पृष्ठ के समान डोमेन से आए। अन्यथा ब्राउज़र आपको कैनवास के पिक्सेल डेटा को पढ़ने या संशोधित करने की अनुमति नहीं देगा।

यहाँ JSFiddle ने JSFiddle लोगो का रंग बदल दिया है।

//Base64 source, but any local source will work
var src = "data:image/png;base64,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";
var canvas = document.getElementById("theCanvas");
var ctx = canvas.getContext("2d");
var img = new Image;

//wait for the image to load
img.onload = function() {
    //Draw the original image so that you can fetch the colour data
    ctx.drawImage(img,0,0);
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    /*
    imgData.data is a one-dimensional array which contains 
    the respective RGBA values for every pixel 
    in the selected region of the context 
    (note i+=4 in the loop)
    */
    
    for (var i = 0; i < imgData.data.length; i+=4) {
			imgData.data[i] = 255; //Red, 0-255
			imgData.data[i+1] = 255; //Green, 0-255
			imgData.data[i+2] = 255; //Blue, 0-255
			/* 
			imgData.data[i+3] contains the alpha value
			which we are going to ignore and leave
			alone with its original value
			*/
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the original image
    ctx.putImageData(imgData, 0, 0); //paint the new colorised image
}

//Load the image!
img.src = src;

body {
    background: green;
}

<canvas id="theCanvas"></canvas>