html5中如何更新圖片顏色

本文小編為大家詳細(xì)介紹“html5中如何更新圖片顏色”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html5中如何更新圖片顏色”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

代碼如下：

<canvas id="c1" width="1220" height = "880" ></canvas> 
<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>

讀到這里，這篇“html5中如何更新圖片顏色”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。