Convertir une image en niveaux de gris en HTML / CSS

Existe-t-il un moyen simple d'afficher un bitmap couleur en niveaux de gris avec juste HTML/CSS?

Il n'a pas besoin d'être compatible avec IE (et j'imagine que ce ne sera pas le cas) - si cela fonctionne dans FF3 et / ou Sf3, c'est assez bon pour moi.

Je sais que je peux le faire avec les deux SVGet Canvas, mais cela semble être beaucoup de travail en ce moment.

Y a-t-il un moyen vraiment paresseux pour le faire?

La prise en charge des filtres CSS est arrivée dans Webkit. Nous avons donc maintenant une solution multi-navigateur.

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

Et Internet Explorer 10?

Vous pouvez utiliser un polyfill comme le gris .

À la suite de la réponse de brillout.com , ainsi que la réponse de Roman Nurik , et se détendre un peu l'exigence du « non SVG », vous pouvez désaturer images dans Firefox en utilisant un seul fichier SVG et CSS certains.

Votre fichier SVG ressemblera à ceci:

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

Enregistrez-le en tant que resources.svg, il peut être réutilisé à partir de maintenant pour toute image que vous souhaitez modifier en niveaux de gris.

Dans votre CSS, vous référencez le filtre en utilisant le spécifique Firefox filter propriété :

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

Ajoutez aussi les propriétés propriétaires de MS si vous en avez envie, appliquez cette classe à n'importe quelle image que vous souhaitez convertir en niveaux de gris (fonctionne dans Firefox> 3.5, IE8) .

edit : Voici un joli article de blog qui décrit l'utilisation de la nouvelle filterpropriété CSS3 dans la réponse de SalmanPK de concert avec l'approche SVG décrite ici. En utilisant cette approche, vous vous retrouveriez avec quelque chose comme:

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 */
}

Plus d'informations sur le support du navigateur ici .

Pour Firefox, vous n'avez pas besoin de créer un fichier filter.svg, vous pouvez utiliser le schéma d'URI de données .

Reprendre le code CSS de la première réponse donne:

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+ */

Prenez soin de remplacer la chaîne "utf-8" par votre encodage de fichier.

Cette méthode devrait être plus rapide que l'autre car le navigateur n'aura pas besoin de faire une deuxième requête HTTP.

Mise à jour: j'en ai fait un dépôt GitHub complet, y compris du polyfill JavaScript pour IE10 et IE11: https://github.com/karlhorky/gray

J'ai utilisé à l' origine la réponse de SalmanPK , mais ensuite créé la variante ci-dessous pour éliminer la demande HTTP supplémentaire requise pour le fichier SVG. Le SVG en ligne fonctionne dans les versions 10 et supérieures de Firefox, et les versions inférieures à 10 ne représentent même plus 1% du marché mondial des navigateurs.

Depuis, je garde la solution à jour sur ce billet de blog , ajoutant la prise en charge du fondu en couleur, la prise en charge d'IE 10/11 avec SVG et des niveaux de gris partiels dans la démo.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  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");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Si vous êtes en mesure d'utiliser JavaScript, ce script peut être ce que vous recherchez. Cela fonctionne sur plusieurs navigateurs et fonctionne très bien pour moi jusqu'à présent. Vous ne pouvez pas l'utiliser avec des images chargées à partir d'un domaine différent.

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

Je viens d'avoir le même problème aujourd'hui. J'ai d'abord utilisé la solution SalmanPK mais j'ai découvert que l'effet diffère entre FF et les autres navigateurs. C'est parce que la matrice de conversion ne fonctionne que sur la luminosité et non sur la luminosité comme les filtres dans Chrome / IE. À ma grande surprise, j'ai découvert qu'une solution alternative et plus simple en SVG fonctionne également dans FF4 + et produit de meilleurs résultats:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Avec CSS:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Une autre mise en garde est que IE10 ne prend plus en charge "filter: gray:" en mode conforme aux normes, donc a besoin d'un commutateur de mode de compatibilité dans les en-têtes pour fonctionner:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Le moyen le plus simple d'obtenir exclusivement des niveaux de gris avec CSS est via la filterpropriété.

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

La propriété n'est toujours pas entièrement prise en charge et nécessite toujours la -webkit-filterpropriété pour la prise en charge sur tous les navigateurs.

Il ne semble pas (encore) possible, même avec CSS3 ou propriétaire -webkit-ou-moz- CSS.

Cependant, j'ai trouvé ce post de juin dernier qui utilisait des filtres SVG sur HTML. Non disponible dans aucun navigateur actuel (la démo faisait allusion à une version WebKit personnalisée), mais très impressionnante comme preuve de concept.

Pour les personnes qui posent des questions sur le support IE10 + ignoré dans d'autres réponses, consultez ce morceau de CSS:

img.grayscale:hover {
    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");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Appliqué sur ce balisage:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Pour plus de démos, consultez la section Graphiques CSS3 de IE testdrive et cet ancien blog IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Dans Internet Explorer, utilisez la propriété filter.

Dans webkit et Firefox, il n'y a actuellement aucun moyen de désatuarte une image uniquement avec CSS. vous devrez donc utiliser canvas ou SVG pour une solution côté client.

Mais je pense que l'utilisation de SVG est plus élégante. consultez mon article de blog pour la solution SVG qui fonctionne à la fois pour Firefox et webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Et à proprement parler puisque SVG est HTML, la solution est pure html + css :-)

Une nouvelle façon de procéder est disponible depuis un certain temps sur les navigateurs modernes.

le mode background-blend vous permet d'obtenir des effets intéressants, dont l'un est la conversion en niveaux de gris

La luminosité de la valeur , réglée sur un fond blanc, le permet. (survoler pour le voir en gris)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

La luminosité est prise de l'image, la couleur est prise de l'arrière-plan. Puisqu'il est toujours blanc, il n'y a pas de couleur.

Mais cela permet bien plus.

Vous pouvez animer le réglage de l'effet sur 3 calques. La première sera l'image et la seconde sera un dégradé blanc-noir. Si vous appliquez un mode de mélange multiplié à cela, vous obtiendrez un résultat blanc comme précédemment sur la partie blanche, mais l'image d'origine sur la partie noire (multiplier par blanc donne du blanc, multiplier par noir n'a aucun effet.)

Sur la partie blanche du dégradé, vous obtenez le même effet qu'auparavant. Sur la partie noire du dégradé, vous mélangez l'image sur elle-même et le résultat est l'image non modifiée.

Maintenant, tout ce qui est nécessaire est de déplacer le dégradé pour obtenir cet effet dynamique: (survoler pour le voir en couleur)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

référence

matrice de compatibilité

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

Peut-être que cette façon vous aidera

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

w3schools.org

Il est en fait plus facile de le faire avec IE si je me souviens bien d'avoir utilisé une propriété CSS propriétaire. Essayez ceci FILTER: Graydepuis http://www.ssi-developer.net/css/visual-filters.shtml

La méthode d' Ax rend simplement l'image transparente et a un fond noir derrière. Je suis sûr que vous pourriez dire que c'est en niveaux de gris.

Bien que vous ne vouliez pas utiliser Javascript, je pense que vous devrez l'utiliser. Vous pouvez également utiliser un langage côté serveur pour le faire.

Si vous souhaitez utiliser Javascript, vous pouvez utiliser un canevas pour convertir l'image en niveaux de gris. Depuis la prise en charge de Firefox et Safari <canvas>, cela devrait fonctionner.

J'ai donc googlé "toile en niveaux de gris", et le premier résultat a été http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html qui semble fonctionner.

la prise en charge des filtres CSS natifs dans le webkit a été ajoutée à partir de la version actuelle 19.0.1084.46

donc -webkit-filter: les niveaux de gris (1) fonctionneront et ce qui est plus facile que l'approche SVG pour webkit ...

Voici un mixin pour MOINS qui vous permettra de choisir n'importe quelle opacité. Remplissez vous-même les variables pour CSS simple à différents pourcentages.

Astuce ici , il utilise le type saturé pour la matrice, vous n'avez donc rien à faire pour changer le pourcentage.

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

Ensuite, utilisez-le:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

Vous n'avez pas besoin d'utiliser autant de préfixes pour une utilisation complète, car si vous choisissez le préfixe pour l'ancien firefox, vous n'avez pas besoin d'utiliser le préfixe pour le nouveau firefox.

Donc, pour une utilisation complète, utilisez suffisamment ce code:

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

En complément des réponses des autres, il est possible de désaturer une image à mi-chemin sur FF sans les maux de tête de la matrice SVG :

<feColorMatrix type="saturate" values="$v" />

Où $vest entre 0et 1. C'est équivalent àfilter:grayscale(50%); .

Exemple en direct:

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

Référence sur MDN

Basé sur la réponse de robertc :

Pour obtenir une conversion correcte de l'image colorée en image en niveaux de gris au lieu d'utiliser une matrice comme celle-ci:

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

Vous devez utiliser une matrice de conversion comme celle-ci:

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

Cela devrait fonctionner correctement pour tous les types d'images basés sur le modèle RGBA (rouge-vert-bleu-alpha).

Pour plus d'informations sur la raison pour laquelle vous devriez utiliser la matrice, j'ai publié plus probablement que l'un des robertc vérifie les liens suivants:

• Les signaux de luminance et de différence de couleur
• Réponse de Margus à la question: "greyscalevalue in colorvalue" @stackoverflow part: Edit 2: @Hans Passant
• Charles A. Bouman - Université Purdue - Télévision analogique pages 20 et 21
• Et ici, vous pouvez trouver des codes C # et VB

Une solution terrible mais réalisable: rendre l'image à l'aide d'un objet Flash, qui vous donne ensuite toutes les transformations possibles dans Flash.

Si vos utilisateurs utilisent des navigateurs à la pointe de la technologie et que Firefox 3.5 et Safari 4 le prennent en charge (je ne sais pas si c'est le cas / le feront), vous pouvez ajuster l' attribut CSS de profil de couleur de l'image, en le définissant sur un ICC en niveaux de gris Profil URL. Mais ça fait beaucoup de si!

être une alternative pour les anciens navigateurs pourrait être d'utiliser un masque produit par des pseudo-éléments ou des balises en ligne.

Le positionnement absolu en survolant une img (ou une zone de texte qui ne nécessite ni clic ni sélection) peut imiter étroitement les effets de l'échelle des couleurs, via rgba () ou translucide png .

Il ne donnera pas une seule échelle de couleurs, mais nuancera les couleurs hors de portée.

test sur stylo code avec 10 couleurs différentes via pseudo-élément, le dernier est gris. http://codepen.io/gcyrillus/pen/nqpDd (recharger pour passer à une autre image)

Vous pouvez utiliser l'une des fonctions de jFunc - utilisez la fonction "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Essayez ce plugin jquery. Bien que ce ne soit pas une solution HTML et CSS pure, c'est un moyen paresseux de réaliser ce que vous voulez. Vous pouvez personnaliser votre échelle de gris en fonction de votre utilisation. Utilisez-le comme suit:

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

Il y a une démo interactive . Vous pouvez jouer avec.

Consultez la documentation sur l'utilisation, c'est assez simple. docs

Pour les niveaux de gris en pourcentage dans Firefox, utilisez plutôt un filtre saturé : (recherchez «saturé»)

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"

Si vous, ou quelqu'un d'autre confronté à un problème similaire à l'avenir, êtes ouvert à PHP. (Je sais que vous avez dit HTML / CSS, mais vous utilisez peut-être déjà PHP dans le backend) Voici une solution PHP:

Je l'ai obtenu de la bibliothèque PHP GD et j'ai ajouté une variable pour automatiser le processus ...

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

?>