it-swarm.com.de

CSS-Filter: Farbbilder mit Transparenz in Weiß erstellen

Ich habe ein farbiges PNG-Bild mit Transparenz. Ich möchte CSS-Filter verwenden, um das gesamte Bild weiß zu machen, aber die Transparenz so lassen, wie sie ist. Ist das in CSS möglich?

90
Pascal Klein

Sie können verwenden

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>

Erstens macht brightness(0) das gesamte Bild schwarz, mit Ausnahme der transparenten Teile, die transparent bleiben.

Dann macht invert(1) die schwarzen Teile weiß.

297
Oriol

Meines Wissens gibt es leider keinen CSS-Filter, um ein Element einzufärben (vielleicht mit etwas SVG-Filtermagie, aber ich bin damit nicht vertraut), und selbst wenn das nicht der Fall wäre, werden Filter grundsätzlich nur von unterstützt Webkit-Browser.

Sie können dies trotzdem umgehen und ein canvas verwenden, um Ihr Bild zu ändern. Grundsätzlich können Sie ein Bildelement auf eine Leinwand zeichnen und dann die Pixel durchlaufen, wobei Sie die jeweiligen RGBA-Werte auf die gewünschte Farbe einstellen.

Für Leinwände gelten jedoch einige Einschränkungen. Am wichtigsten ist, dass Sie sicherstellen, dass das Bild src aus derselben Domäne stammt wie die Seite. Andernfalls können Sie im Browser die Pixeldaten der Zeichenfläche nicht lesen oder ändern.

Hier ist ein JSFiddle Ändern der Farbe des JSFiddle-Logos.

//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>
5
Daniel Perván