Html5 update image color example code _ html5 tutorial tips-

This article introduces how to update the image color in html5.

The Code is as follows:

Script
Var cID = "c1 ";
Var image = new Image ();
Image. src = "Eye/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. width = w;
C. height = h;
// Draw the image on the temporary canvas
Ctx. drawImage (img, 0, 0, w, h );
// Pull the entire image into an array of pixel data
Var imageData = ctx. getImageData (0, 0, w, h );
// Examine every pixel,
// Change any old rgb to the new-rgb
For (var I = 0; I <imageData. data. length; I ++ = 4 ){
// Is this pixel the old rgb?
If (imageData. data [I] = oldRed & imageData. data [I + 1] = oldGreen & imageData. data [I + 2] = oldBlue ){
// Change to your new rgb
ImageData. data [I] = newRed;
ImageData. data [I + 1] = newGreen;
ImageData. data [I + 2] = newBlue;
}
}
// Put the altered data back on the canvas
Ctx. putImageData (imageData, 0, 0 );
}
Script