Page d'accueil>Tutoriel de conception de sites Web>Tutoriel HTML

Effet de conversion en noir et blanc d'image HTML5

Auteur：Eve Cole Date de mise à jour：2025-03-30 15:48:01

Le but de cet exemple est de vous montrer comment créer un effet de suspension de souris d'une image en niveaux de gris / couleur à l'aide de HTML5 et JQuery. Avant que HTML5 n'apparaisse, la réalisation de cet effet a nécessité deux images, colorées et en niveaux de gris. HTML5 rend désormais la création de cet effet plus facile et plus efficace, car les images grises seront générées directement à partir du fichier d'origine. J'espère que vous trouverez ce script utile dans des modèles tels que des armoires d'affichage ou des albums photo.

Le code jQuery suivant recherchera l'image cible et générera une version en niveaux de gris. Lorsque la souris est suspendue sur l'image, le code changera progressivement l'image en niveaux de gris en couleur.

  1. <mce: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text / javascript> </ mce: script>
  2. <mce: scripttype = text / javascript> <! -
  4. //Onwindowload.ChiswaitSuntilimageShaveloaded whatissential
  5. $ (fenêtre) .load (function () {
  7. // fadeinimagessothereis notacolorpopDocumentload et thenonwindowload
  8. $ (. itemImg) .fadein (500);
  10. // CloneImage
  11. $ ('. itemImg'). Chaque (fonction () {
  12. varel = $ (this);
  13. el.css ({position: absolu}). wrap (<divclass = 'img_wrapper'style = affiche: inline-blockmce_style = affichage: en ligne de bloc>). clone (). addClass ('img_grayscale'). css ({position: absolue, z-index: 998, opacité: 0}). insertBefore (el) .queue (function () {
  14. varel = $ (this);
  15. el.parent (). css ({largeur: this.width, hauteur: this.height});
  16. el.dequeue ();
  17. });
  18. this.src = GraysCale (this.src);
  19. });
  21. // FADEIMAGE
  22. $ ('. itemImg'). MouseOver (function () {
  23. $ (this) .parent (). find ('img: premier'). stop (). animate ({opacity: 1}, 1000);
  24. })
  25. $ ('. IMG_GRAYSCALE'). Mouseout (function () {
  26. $ (this) .stop (). Animate ({opacité: 0}, 1000);
  27. });
  28. });
  30. // Grayscalewcanvasmethod
  31. functiongrayscale (src) {
  32. varCanvas = document.CreateElement ('Canvas');
  33. varctx = canvas.getContext ('2d');
  34. varimgobj = newImage ();
  35. imgobj.src = src;
  36. canvas.width = imgobj.width;
  37. canvas.height = imgobj.height;
  38. ctx.DrawImage (Imgobj, 0,0);
  39. varimgPixels = ctx.getImagedata (0,0, canvas.width, canvas.height);
  40. pour (variy = 0; y <imgpixels.height; y ++) {
  41. pour (varx = 0; x <imgpixels.width; x ++) {
  42. vari = (y * 4) * imgpixels.width + x * 4;
  43. varavg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
  44. imgpixels.data [i] = avg;
  45. imgPixels.data [i + 1] = avg;
  46. imgPixels.data [i + 2] = avg;
  47. }
  48. }
  49. ctx.putImagedata (imgpixels, 0,0,0,0, imgpixels.width, imgPixels.height);
  50. returnCanvas.todataurl ();
  51. }
  53. // -> </ mce: script>
Comment utiliser

* Cite jquery.js

* Collez le code ci-dessus

* Définissez l'image cible (par exemple .Post-IMG, IMG, .gallery IMG, etc.)

* Vous pouvez modifier la vitesse de l'animation (par exemple, 1000 = 1 seconde)

compatibilité

Peut travailler sur n'importe quel navigateur qui prend en charge HTML5 et JavaScript, tels que Chrome, Safari et Firefox. Si le navigateur ne prend pas en charge HTML5, cet effet retombera à l'image couleur d'origine. Remarque: Si le fichier local ne fonctionne pas sur Firefox et Chrome, vous devez mettre le code HTML sur un serveur Web.

Articles connexes