Comment créer des images en noir et blanc en utilisant les compétences JavaScript_javascript

Cet article présente principalement le code d'implémentation des images en noir et blanc avec JS. Maintenant, je le partage avec vous. Les amis qui en ont besoin peuvent s'y référer

HTML5 a introduit l'élément 5ba626b379994d53f7acf72a64f9b697 nous d'utiliser js pour dessiner dynamiquement des images dans la zone 5ba626b379994d53f7acf72a64f9b697 Cette fois, nous avons rendu l'image en noir et blanc en utilisant js pour faire fonctionner l'élément 5ba626b379994d53f7acf72a64f9b697

Jetons d'abord un coup d'œil aux rendus

La balise img est à gauche et la balise d'élément canevas est à droite. suit

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

Le code JS est très simple, avec seulement plus de 20 lignes. Cependant, conformément à l'attitude d'apprendre aux gens à pêcher plutôt qu'à pêcher. En apprenant aux gens à pêcher, le code source sera affiché en bas. Parlons d'abord de la théorie.

1. À propos des images

Tout le monde doit savoir que la soi-disant image est composée de pixels, c'est-à-dire une image de taille 300*300. font 300*300 pixels au total, et chaque pixel est composé de trois couleurs primaires (rouge, vert, bleu) plus de transparence (alpha). Donc, si nous voulons modifier les données d'image de l'image, nous modifions en fait les données de chaque pixel de l'image.

2. À propos de l'API

Nous pouvons obtenir l'objet canevas via var drawing = document.getElementById('drawing') ; Cette méthode fournit deux méthodes de dessin : 2D et 3D. 🎜> pour obtenir l'objet context2d en utilisant la méthode
. Après avoir obtenu l'objet context2d, nous obtenons les données d'image via la méthode getImageData() fournie par context2d. getImageData() a 4 paramètres, qui représentent respectivement les coordonnées x et y de la zone d'écran et la largeur et la hauteur en pixels de la zone <. code> var imagedata = context2d.getImageData(0, 0, image.width, image.height); context2d = drawing.getContext('2d'); var imagedata = context2d.getImageData(0, 0, image.width, image.height); <br>

L'objet ImageData a trois propriétés : width, height et

data . L'attribut data est un tableau qui stocke les données de chaque pixel de l'image. Et représenté par rouge, vert, bleu, alpha. Ensuite, si nous voulons modifier les données d'image de l'image, nous devons modifier les données d'attribut de données d'imagedata et modifier les valeurs de rouge, vert, bleu et alpha.

Voici le code source

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

Recommandations associées :

Comment coder JavaScript détaillé Implémenter le tri rapide

Comment JavaScript implémente le tri à bulles de manière encapsulée

Explication détaillée du mécanisme de fonctionnement JavaScript et de l'analyse conceptuelle

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!