Convertir une image en niveaux de gris en HTML / CSS


619

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?


14
"Il n'a pas besoin d'être compatible avec IE (et j'imagine que ce ne sera pas le cas)" ?? IE fournit un ensemble de filtres DX depuis 1997 (IE4) qui fait ce travail avec de simples CSS et bien plus encore. Maintenant, ils ont abandonné les filtres DX dans IE10 et suivent strictement les filtres standard basés sur SVG. Vous voudrez peut-être jeter un œil à ceci et à cette démo .
vulcan raven

8
@vulcanraven Ce n'est pas vraiment un simple CSS - si vous désactivez les scripts actifs dans IE, les filtres cessent de fonctionner.
robertc

3
@robertc, c'est à peu près juste. En revanche, si vous désactivez javascript dans n'importe quel navigateur, presque toutes les RIA, y compris Stackoverflow, cesseront de fonctionner (à moins que le développeur Web n'ait implémenté la version de remplacement HTML uniquement).
vulcan raven

2
Utilisez simplement le CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… Obtenez ma réponse dans cette question
Sakata Gintoki

Réponses:


728

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 .


1
Les filtres CSS @CamiloMartin ne sont pris en charge que par Chrome 18+
Salman von Abbas

2
Mise à jour: la dernière version stable de Google Chrome (19) prend désormais en charge les filtres CSS. Yay! =)
Salman von Abbas

6
Existe-t-il une solution pour Opera?
Rustam

23
Alors, quelle est la solution pour IE10?
Tom Auger

2
Pour la postérité: @TomAuger, ce Q&A a des instructions spécifiques pour IE10.
Barney

127

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


6
Dans le webkit, vous faites ceci: -webkit-filter: grayscale(100%);puis ceci: -webkit-filter: grayscale(0);pour le supprimer.
SeanJA

@SeanJA Merci pour la mise à jour, WebKit a commencé à implémenter ce truc en décembre
robertc

Je le vois en version bêta chromée sur mon ordinateur portable Linux et ma machine Win7. Cela ne semblait pas fonctionner dans Chrome stable sous Linux (mais là encore, il est possible que la version de Linux soit derrière Windows ').
SeanJA

1
Cette méthode fonctionne bien pour moi dans Chrome, mais n'a aucun effet dans Safari. Dans FF, cela rend mes images invisibles jusqu'au vol stationnaire.
colmtuite

85

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.


3
Juste une note pour éviter les maux de tête: YUI Compressor supprime les espaces dans les URL de données. Vous pouvez donc envisager d'utiliser un autre minifieur si vous souhaitez utiliser cette solution.
Malte

6
@Malte Ou peut-être simplement remplacer les espaces par une chaîne "% 20"?
mquandalle

@mquandalle malheureusement IE10 ne prend pas en charge le filtre: gris blogs.msdn.com/b/ie/archive/2011/12/07/…
Jedi.za

1
Sur firefox, mon gris est très clair. Existe-t-il un moyen d'augmenter le contraste ou de l'assombrir légèrement? Les autres navigateurs ont fière allure.
square_eyes

27

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

14

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/


11

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

2
Semble une solution meilleure et plus simple - ce serait bien si SalmanPK et mquandalle mettaient à jour leurs solutions. Apparemment, la matrice qu'ils utilisent est cassée <br> <br> Voici la version des données intégrées: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie

11

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.


7

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.


7

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


7

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 :-)


salut brillout. J'ai remarqué que votre échelle de gris échoue réellement lors d'un safari. Un suivi? Merci
cygne

1
SVG n'est pas HTML. C'est une toute autre spécification.
Camilo Martin


1
@robertc Ce lien consiste à mettre un SVG dans un HTML, mais voici la spécification SVG et voici la spécification HTML . Le fait que les deux soient similaires (ou, à XML) ne signifie pas qu'ils sont la même chose ...
Camilo Martin

1
Mais il renvoie à la spécification SVG dans la référence ... Il ne définit pas SVG, dit simplement que les navigateurs doivent l'analyser. C'est comme Javascript ou CSS à cet égard.
Camilo Martin

6

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é


1
@Andy, j'ai commencé ma réponse en disant dans les navigateurs modernes
vals

Comment pouvez-vous appliquer cela si une imgbalise n'est pas utilisée pour l'imagebackground: url()
Mohammad Elbanna

1
@MohammadElbanna Vous devez utiliser le mode mix-blend au lieu du mode background-blend
vals

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

4

Peut-être que cette façon vous aidera

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

w3schools.org


3

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.


Je n'ai même pas de boîte Windows, alors merci, mais cela ne me sert à rien.
Ken

Dans ce cas, vous pouvez le regarder avec une machine virtuelle avec IE, implémenter la méthode de ax ou utiliser canvas ... notez que le gris sur de grandes images avec canvas peut être assez éprouvant pour le moteur Javascript.
alex

7
filter: grayest présent dans Internet Explorer depuis la version 4 . Ils ont pris beaucoup de merde pour leur produit - à juste titre! - mais ils étaient vraiment en avance sur leur temps avec ce genre de choses
Pekka


2

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


2

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

2

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

2

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

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

Exemple en direct:

Référence sur MDN


1

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:


Je suis d'accord que 0,3333 est faux; 0.2126 0.7152 0.0722 0 0semble être l'équivalent de<fecolormatrix type="saturate" values="0">
Neil

Le lien vers "Et ici vous pouvez trouver des codes C # et VB" peut être trouvé sur les archives Internet ici: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek

Le lien vers "Les signaux de luminance et de différence de couleur" est également rompu. Je n'ai pas pu trouver de remplaçant.
thisgeek

0

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!


0

ê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)



0

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


0

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"

-1

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

?>

4
@Tom, sur la base des votes et des favoris sur la question d'origine, l'OP n'est pas la seule personne à se demander si c'est possible. Bien sûr, cette réponse pourrait contourner les règles, mais je ne vois pas l'intérêt de voter contre une réponse qui pourrait être utile à beaucoup de gens.
Michael Martin-Smucker

1
@ Tom, je pensais que ce n'était peut-être pas une réponse exacte à la question, cela pourrait être utile car cela "résout" le problème de l'échelle de gris sans les "tracas" de javascript, peut-être qu'il n'a même pas envisagé ou savait PHP GD, aucun mal intentionné. @ mlms13 qui était exactement le point, merci :)
Trufa

C'est ma mauvaise, "pensé" à ce que les autres utilisateurs puissent bénéficier de ce message qui m'a échappé. Excuses @Trufa.
secousse du

3
Cela m'a aidé, m'a mis sur la bonne voie après quelques autres impasses. J'ai trouvé que l'utilisation de "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" a cependant donné un bien meilleur résultat. (PHP 5 uniquement)
chrismacp

5
Voté, car il est pratiquement hors sujet. La mise à l'échelle d'une image côté serveur est complètement différente de CSS / HTML.
Simon Steinberger
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.