html5更新圖片顏色代碼是啥

下面我們給大家介紹一下html5更新圖片顏色代碼吧!希望大家可以在這裡學習!

 <canvas id="c1" width="1220" height = "880" style="background: none repeat scroll 0% 0% transparent; "></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更新圖片顏色代碼的精彩內容就先到這裡。更多精彩內容，還請大家持續關注精品。

相關推薦：

HTML5圖片預覽的方法介紹