Utilisez JS pour manipuler les images, en ne laissant que le noir et blanc

Cette fois, je vais vous apporter quelques éléments à prendre en compte lors de l'utilisation de JS pour manipuler des images afin de ne conserver que le noir et blanc. Ce qui suit est un cas pratique, jetons-y un coup d'œil.

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

Le côté gauche est la balise img et le côté droit est la balise de l'élément canvas La structure est la suivante

<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, mais dans l'esprit de Il vaut mieux apprendre aux gens à pêcher que de leur apprendre à 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 <.>context2d = drawing.getContext('2d'); var imagedata = context2d.getImageData(0, 0, image.width, image.height);  Les objets ImageData ont trois propriétés : width, height et

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

Lecture recommandée :

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!