Convertir l'image en noir et blanc à l'aide de CSS

Avec l'évolution des temps, de nos jours, avec l'avancement progressif de CSS3, nous avons également commencé à voir la possibilité d'une application à grande échelle de « l'effet noir et blanc » dans la pratique. Ensuite, nous présenterons la mise en œuvre de. Filtre en niveaux de gris CSS3. Les amis intéressés peuvent en savoir plus. Vous savez peut-être depuis longtemps qu'il est facile de rendre complètement gris les sites Web dans les mauvais jours comme Wenchuan sous IE (filtre : gris ;). Cependant, à cette époque, les autres navigateurs n'avaient pas de solution. Cependant, avec l'évolution des temps, maintenant, avec l'avancement progressif de CSS3, nous avons également commencé à voir la possibilité d'une application à grande échelle de « l'effet noir et blanc » dans la pratique.

Implémentation du filtre en niveaux de gris CSS3
Le code de test suivant :

Le code est le suivant :

.gray { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: gray; 
}

Code HTML :

Le code est le suivant :

<img src="mm1.jpg" /> 
<img src="mm1.jpg" class="gray" />

Si le navigateur que vous possédez est Chrome18+, vous pouvez cliquer ici : Filtre CSS3 en niveaux de gris et photo noir et blanc⤴
Vous pouvez voir l'image de l'effet de contraste noir et blanc présentée au début d'un article similaire.
D’autres navigateurs comme FireFox suivront bientôt. Bien entendu, il est également possible d'obtenir l'effet de transformer des photos en noir et blanc sur (par exemple) le navigateur FireFox 4. Vous pouvez utiliser l'effet de filtre en niveaux de gris de SVG.
Implémentation du filtre SVG
Nous créons un nouveau fichier texte vierge, par exemple : gray.txt Copiez le code XML suivant :

Le code est le suivant :

<svg version="1.1" 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>

Ensuite, modifiez le suffixe .txt → .svg Vous pouvez ensuite l'appeler~~

Le code d'appel CSS suivant : filtre. : url(gray .svg#grayscale);Ensuite, l'effet apparaît. Si le navigateur que vous possédez est FireFox4+, vous pouvez cliquer ici : Filtre SVG pour réaliser une démo photo en noir et blanc⤴
N'oubliez pas le navigateur IE

L'implémentation sous IE a été évoquée plus haut, c'est à dire  : filtre : gris ; au moins IE7~9 le prend en charge. J'ai été trop paresseux pour tester IE6 récemment, donc je ne sais pas s'il est pris en charge ou non. A en juger par l'expérience, il convient de le soutenir.
J'ai besoin d'un moyen d'unifier le pays
Pour unifier le pays (entièrement compatible), si vous voulez simplement utiliser CSS, vous pouvez le faire : tout ce que vous avez à faire est de : prendre une canne à pêche et aller pêcher. dans la rivière Huangpu tous les jours, année après année, jour après jour... Puis, deux ans plus tard, jusqu'à deux ans, F5 sur les deux pages de démonstration ci-dessus, c'est tout ! C'est très simple !
Si vous pensez que l'approche ci-dessus est trop basée sur Londres et que vous n'êtes pas déterminé, il existe un moyen d'unifier le monde, mais ce n'est pas CSS, c'est Greyscale.js, qui semble être un peu célèbre .
L'utilisation est très simple, citez le fichier JavaScript, comme suit :
bfe8242ffbe85b6ab07c814a32ff92392cacc6d41bbb37262a98f745aa00fbf0 Ensuite, une phrase Mots :
grayscale(document.getElementById("thisImage")); ou ensemble d'éléments DOM :
grayscale(document.getElementsByTagName("img")); Si vous aimez utiliser jQuery, vous pouvez utilisez également :
grayscale($("#thisImage")); C'est très simple.
Principe de mise en œuvre : Dans le navigateur IE, un filtre en niveaux de gris est ajouté. D'autres navigateurs semblent utiliser la méthode getImageData dans Canvas, puis effectuent une conversion en niveaux de gris sur chaque pixel~~
Par conséquent, sous les navigateurs modernes, cette méthode a deux limitations pour le traitement des images en niveaux de gris :
1. Il faut quelques secondes pour que cette image de taille moyenne 300*300 devienne grise
2. Mécanisme de sécurité, les images inter-domaines ne peuvent pas être converties en noir et blanc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!