html5 업데이트 이미지 색상 샘플 code_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);
}
function 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.너비 = w;
c.높이 = h;
// 임시 캔버스에 이미지를 그립니다.
ctx.drawImage(img, 0, 0, w, h);
// 전체 이미지를 픽셀 데이터 배열로 가져옵니다.
var imageData = ctx.getImageData(0, 0, w, h);
// 모든 픽셀을 검사합니다.
// 기존 RGB를 새 RGB로 변경합니다.
for (var i = 0; i < imageData.data.length; i = 4) {
// 이 픽셀은 이전 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);
}