html5 更新圖片顏色範例程式碼_html5教學技巧

複製程式碼

代碼如下：

;

var cID = "c1";
var image = new Image( );
image.src = "眼睛/item_eye_1.png";
image.onload = function () {
recolorImage(cID,image, 0, 0, 0, 255, 0, 0);
}
函數recolorImage(c,img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) {
var c = document.getElementById(c);
var ctx = c.getContext( "2d");
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
// 在暫時畫布上繪製影像
ctx.drawImage(img, 0, 0, w, h);
// 將整個影像拉入像素資料數組
var imageData = ctx.getImageData(0, 0, w , h);
// 檢查每個像素，
// 將任何舊的RGB 改為新的RGB
for (var i = 0; i // 這個像素是舊的RGB 像素嗎？
if (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) {
// 改為新的RGB
imageData.data[i] = newRed;
imageData.data[i 1] = newGreen;
imageData.data[i 2] = newBlue;
}
}
// 將更改後的資料放回畫布
ctx.putImageData(imageData, 0, 0);
}
腳本>