Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to update the picture color in html5", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to update the picture color in html5" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

The code is as follows:

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 (cJournal 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) } after reading this, the article "how to update picture colors in html5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.