Commentaire: Dans le passé, si vous vouliez afficher des images en niveaux de gris sur le Web, vous ne pouvez utiliser manuellement le logiciel d'image pour les convertir. Mais maintenant, ce processus peut être réalisé à l'aide de la toile HTML5, sans avoir besoin d'utiliser un logiciel d'édition d'image
Dans le passé, si vous vouliez afficher des images en niveaux de gris sur le Web, vous ne pouvez utiliser manuellement des logiciels d'image pour les convertir. Mais maintenant, ce processus peut être réalisé à l'aide de la toile HTML5, sans avoir besoin d'utiliser un logiciel d'édition d'image. J'ai utilisé HTML5 et JQuery pour faire une démo pour montrer comment implémenter cette fonction.But
Cette démo vous montrera comment basculer entre l'image en niveaux de gris et l'image d'origine lors du déplacement de la souris sur l'image avec HTML5 et JQuery. Avant que HTML5 n'apparaisse, pour implémenter cette fonction, deux images doivent être préparées, une image en niveaux de gris et une image originale. Mais maintenant, il peut être réalisé plus rapidement et plus facile avec HTML5, car les images en niveaux de gris sont générées directement sur l'image d'origine. J'espère que ce code JS sera utile lorsque vous créez des fonctions d'affichage de fichiers ou d'image.
Diagramme de reproduction
code jQuery
Le code jQuery suivant recherchera l'image cible et générera une version en niveaux de gris. Lorsque vous déplacez votre souris vers l'image, l'image en niveaux de gris se transformera en couleur primaire.
<script src = "jquery.min.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
// Définissez l'événement de chargement de fenêtre pour attendre que toutes les images se chargent avant de fonctionner
$ (fenêtre) .load (function () {
// Faites entrer l'image progressivement pour que l'image d'origine avec la couleur ne soit pas affichée, puis exécutez l'événement de chargement de fenêtre
$ (". article img"). fadein (500);
// Copiez l'image
$ ('. item img'). Chaque (fonction () {
var el = $ (this);
el.css ({"position": "absolu"}). wrap ("<div>"). clone (). addClass ('img_grayscale').
var el = $ (this);
el.parent (). css ({"width": this.width, "height": this.height});
el.dequeue ();
});
this.src = GraysCale (this.src);
});
// fait entrer l'image progressivement
$ ('. item img'). MouseOver (function () {
$ (this) .parent (). find ('img: premier'). stop (). animate ({opacity: 1}, 1000);
})
$ ('. IMG_GRAYSCALE'). Mouseout (function () {
$ (this) .stop (). Animate ({opacité: 0}, 1000);
});
});
// Faire des photos grises avec toile
Fonction GraysCale (Src) {
var canvas = document.CreateElement ('Canvas');
var ctx = canvas.getContext ('2d');
var imgobj = new image ();
imgobj.src = src;
canvas.width = imgobj.width;
canvas.height = imgobj.height;
ctx.DrawImage (imgobj, 0, 0);
var imgPixels = ctx.getImagedata (0, 0, canvas.width, canvas.height);
pour (var y = 0; y <imgpixels.height; y ++) {
pour (var x = 0; x <imgpixels.width; x ++) {
var i = (y * 4) * imgpixels.width + x * 4;
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
imgpixels.data [i] = avg;
imgPixels.data [i + 1] = avg;
imgPixels.data [i + 2] = avg;
}
}
ctx.putImagedata (imgPixels, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.todataurl ();
}
</cript>
Comment utiliser
Suivez les étapes ci-dessous:
Citer jQuery.js
Copiez le code ci-dessus
Définissez l'image cible (par exemple: .Post-IMG, IMG, .galler IMG, etc.)
Vous pouvez également définir la vitesse de l'animation (c'est-à-dire 1000 = 1 seconde)
compatibilité
J'ai essayé tous les navigateurs qui prennent en charge HTML5 et Canvas, tels que: Chrome, Safari et Firefox. S'il s'agit d'un navigateur qui ne prend pas en charge HTML5, il n'utilisera que l'image d'origine et ne générera pas d'images en niveaux de gris.
Remarque: Si le fichier HTML local ne peut pas s'exécuter sur Firefox et Chrome, vous devez déployer le fichier HTML sur le serveur.
Auto-pratique
Je l'ai testé moi-même en fonction du tutoriel et j'ai trouvé que certaines choses étaient prêtées attention. J'ai ouvert la page avec Firefox. Le programme ne peut pas s'exécuter correctement, mais il peut s'exécuter après le déploiement du code pertinent sur le serveur.
Il doit être garanti d'être une image locale, sinon vous devez signaler une erreur de sécurité.
C'est parce que:
Le canevas est un élément de toile dans la norme HTML5 et peut être utilisé pour dessiner des images 2D et 3D.
Cependant, il est facile de rencontrer des problèmes d'erreur de sécurité lors du débogage.
Actuellement, les erreurs de sécurité que j'ai rencontrées lors du débogage apparaissent principalement sur Todataurl () et Src.
L'erreur de sécurité indique que ce code n'a pas de problèmes sémantiques, mais il ne peut pas s'exécuter normalement pour des raisons de sécurité.
La situation d'erreur de sécurité de lancer:
Utilisation d'images de domaine transversal en toile
Débogage dans un environnement local sans serveur
Impossible d'obtenir la relation entre le domaine actuel et l'image
Certaines des solutions trouvées sur StackOverflow sont généralement pour vous permettre de résoudre les problèmes de domaine croisé.
Mais en fait, si vous n'utilisez pas le logiciel du serveur pendant le débogage local, cela entraînera également ce problème.
Par exemple: la fonction Todataurl est utilisée lors du débogage local et le fichier image local est utilisé dans le canevas. Dans Chrome et Firefox, une erreur de sécurité sera toujours lancée.
Une solution courante consiste à configurer un environnement de serveur localement ou à soumettre le contenu au serveur pour déboguer.