html5 mettre à jour l'exemple de couleur de l'image code_html5 compétences du didacticiel

复制代码

代码如下 :

<script> <br>var cID = "c1"; <br>var image = new Image(); <br>image.src = "Œil/item_eye_1.png"; <br>image.onload = function () { <br>recolorImage(cID,image, 0, 0, 0, 255, 0, 0); <br>} <br>function recolorImage(c,img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) { <br>var c = document.getElementById(c); <br>var ctx = c.getContext("2d"); <br>var w = img.width; <br>var h = img.hauteur; <br>c.width = w; <br>c.hauteur = h; <br>// dessine l'image sur le canevas temporaire <br>ctx.drawImage(img, 0, 0, w, h); <br>// extrayez l'image entière dans un tableau de données de pixels <br>var imageData = ctx.getImageData(0, 0, w, h); <br>// examinez chaque pixel, <br>// remplacez n'importe quel ancien RVB par le nouveau RVB <br> pour (var i = 0; i < imageData.data.length; i = 4) { <br /> // ce pixel est-il l'ancien RVB ? <br />if (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) { <br />// passez à votre nouveau RVB <br />imageData.data[i] = newRed; <br />imageData.data[i 1] = newGreen; <br />imageData.data[i 2] = newBlue; <br />} <br />} <br />// remettre les données modifiées sur le canevas <br />ctx.putImageData(imageData, 0, 0); <br />} <br /></script>