html5 update image color sample code_html5 tutorial skills

复制代码

代码如下:

<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>// draw the image on the temporary canvas <br>ctx.drawImage(img, 0, 0, w, h); <br>// pull the entire image into an array of pixel data <br>var imageData = ctx.getImageData(0, 0, w, h); <br>// examine every pixel, <br>// change any old rgb to the new-rgb <br>for (var i = 0; i < imageData.data.length; i = 4) { <br />// is this pixel the old rgb? <br />if (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) { <br />// change to your new rgb <br />imageData.data[i] = newRed; <br />imageData.data[i 1] = newGreen; <br />imageData.data[i 2] = newBlue; <br />} <br />} <br />// put the altered data back on the canvas <br />ctx.putImageData(imageData, 0, 0); <br />} <br /></script>