Maison >interface Web >js tutoriel >Paramètres JS noir et blanc pour les images
Cette fois je vais vous présenter comment paramétrer des images en noir et blanc avec JS. Quelles sont les précautions pour paramétrer des images en noir et blanc avec JS Voici un cas pratique, jetons un oeil.
HTML5 a introduit l'élément
Jetons d'abord un coup d'œil aux rendus
Le côté gauche est la balise img, et le côté droit est la toile balise d'élément. 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. Cependant, conformément à l'attitude d'apprendre aux gens à pêcher plutôt qu'à apprendre 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 utilisons var draw = <a href="http://www.php.cn/code/658.html%20" target="_blank">document<code>var drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById('drawing')
.getElementById('drawing'); Cette méthode peut obtenir l'objet canevas. L'objet canevas fournit deux méthodes de dessin : 2D et 3D. Ici, nous utilisons le dessin 2D
Utilisez la méthode context2d = drawing.getContext('2d');
pour obtenir l'objet context2d. 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 <.> var imagedata = context2d.getImageData(0, 0, image.width, image.height);
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.
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); }Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois ! Lecture recommandée :
Quelles étapes sont nécessaires pour déterminer le type et la taille des images téléchargées
Comment supprimer les doublons lors de la fusion de plusieurs tableaux Data
Explication détaillée de l'utilisation des accessoires React et des attributs d'état
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!