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

Sie können eine der Funktionen von jFunc verwenden - verwenden Sie die Funktion "jFunc_CanvasFilterGrayscale". http://jfunc.com/jFunc-functions.aspx

Answer 2

Probieren Sie dieses Jquery-Plugin aus. Es handelt sich zwar nicht um eine reine HTML- und CSS-Lösung, aber es ist ein bequemer Weg, um zu erreichen, was Sie wollen. Sie können Ihre Graustufen an Ihre Bedürfnisse anpassen. Verwenden Sie es wie folgt:

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

Es gibt ein interaktives Demo . Sie können damit herumspielen.

Schauen Sie sich die Dokumentation über die Verwendung an, es ist ziemlich einfach. docs

Answer 3

Für Graustufen in Prozent in Firefox, verwenden Sie Sättigungsfilter stattdessen: (Suche nach 'sättigen')

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"

Answer 4

Eine schreckliche, aber praktikable Lösung: Rendern Sie das Bild mit einem Flash-Objekt, das Ihnen dann alle in Flash möglichen Transformationen bietet.

Wenn Ihre Nutzer verwenden hochmoderne Browser und wenn Firefox 3.5 und Safari 4 unterstützen es (ich weiß nicht, ob sie es unterstützen werden), können Sie die CSS Farbprofil Attribut des Bildes und setzt es auf eine Graustufen-ICC-Profil-URL. Aber das sind eine Menge Wenns!

Answer 5

Wenn Sie oder jemand anderes, der ein ähnliches Problem hat, in Zukunft offen für PHP sind. (Ich weiß, Sie sagten HTML/CSS, aber vielleicht verwenden Sie bereits PHP im Backend) Hier ist eine PHP-Lösung:

Ich habe es aus der PHP GD-Bibliothek und habe einige Variablen hinzugefügt, um den Prozess zu automatisieren...

<?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);

?>