HTML5-Update-Bildfarbe, Beispielcode_html5-Tutorial-Fähigkeiten

复制代码

代码如下:

<script> <br>var cID = "c1"; <br>var image = new Image(); <br>image.src = "Eye/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.height; <br>c.width = w; <br>c.height = h; <br>// das Bild auf die temporäre Leinwand zeichnen <br>ctx.drawImage(img, 0, 0, w, h); <br>// Ziehen Sie das gesamte Bild in ein Array von Pixeldaten <br>var imageData = ctx.getImageData(0, 0, w, h); <br>// jedes Pixel untersuchen, <br>// jedes alte RGB in das neue RGB ändern <br>for (var i = 0; i < imageData.data.length; i = 4) { <br /> // Ist dieses Pixel das alte RGB? <br />if (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) { <br />// zu Ihrem neuen RGB wechseln <br />imageData.data[i] = newRed; <br />imageData.data[i 1] = newGreen; <br />imageData.data[i 2] = newBlue; <br />} <br />} <br />// die geänderten Daten wieder auf die Leinwand legen <br />ctx.putImageData(imageData, 0, 0); <br />} <br /></script>