Ein Bild in HTML/CSS in Graustufen umwandeln

Question

Gibt es eine einfache Möglichkeit, eine farbige Bitmap in Graustufen darzustellen, indem man nur HTML/CSS ?

Es muss nicht IE-kompatibel sein (und ich nehme an, dass es das auch nicht sein wird) - wenn es in FF3 und/oder Sf3 funktioniert, ist das gut genug für mich.

Ich weiß, dass ich es mit beidem kann SVG und Canvas, aber das scheint im Moment eine Menge Arbeit zu sein.

Gibt es eine wirklich faule Methode, dies zu tun?

Answer 1

Im Internet Explorer verwenden Sie die Filtereigenschaft.

In Webkit und Firefox gibt es derzeit keine Möglichkeit, ein Bild ausschließlich mit CSS zu desatuieren. Sie müssen also entweder Canvas oder SVG für eine clientseitige Lösung verwenden.

Ich denke aber, dass die Verwendung von SVG eleganter ist. In meinem Blogbeitrag finden Sie die SVG-Lösung, die sowohl für Firefox als auch für Webkit funktioniert: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Und da SVG streng genommen HTML ist, ist die Lösung rein html+css :-)

Answer 2

Vielleicht hilft Ihnen dieser Weg

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

w3schools.org

Answer 3

Wenn ich mich recht erinnere, ist es mit dem IE sogar einfacher, wenn man eine proprietäre CSS-Eigenschaft verwendet. Versuchen Sie dies FILTER: Gray de http://www.ssi-developer.net/css/visual-filters.shtml

Die Methode der Ax macht das Bild einfach transparent und hinterlegt es mit einem schwarzen Hintergrund. Ich bin sicher, man könnte argumentieren, dass dies Graustufen sind.

Obwohl Sie kein Javascript verwenden wollten, werden Sie es wohl verwenden müssen. Sie könnten auch eine serverseitige Sprache dafür verwenden.

Answer 4

Basierend auf robertc's Antwort :

Um die richtig Umwandlung von Farbbildern in Graustufenbilder anstelle der Verwendung einer Matrix wie hier:

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

Sie sollten die Umrechnungsmatrix wie folgt verwenden:

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

Dies sollte für alle Arten von Bildern, die auf dem RGBA-Modell (Rot-Grün-Blau-Alpha) basieren, gut funktionieren.

Weitere Informationen darüber, warum Sie die von mir gepostete Matrix eher verwenden sollten als die von Robertc, finden Sie unter den folgenden Links:

• Die Leuchtdichte- und Farbdifferenzsignale
• Antwort von Margus auf die Frage: "greyscalevalue in colorvalue" @stackoverflow Teil: Bearbeiten 2: @Hans Passant
• Charles A. Bouman - Purdue-Universität - Analoges Fernsehen Seite 20 & 21
• Und hier finden Sie einige C#- und VB-Codes

Answer 5

Sie brauchen nicht so viele Präfixe zu verwenden, denn wenn Sie ein Präfix für den alten Firefox wählen, müssen Sie kein Präfix für den neuen Firefox verwenden.

Für eine vollständige Nutzung reicht es also, diesen Code zu verwenden:

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