html5 更新图片颜色示例代码_html5教程技巧

复制代码

代码如下:

<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>