html5 更新图片颜色

最新推荐文章于 2021-06-15 11:59:27 发布

烂笔头LBT

最新推荐文章于 2021-06-15 11:59:27 发布

阅读量1.4k

点赞数

分类专栏： html5 文章标签：图片颜色 canvas html5

本文链接：https://blog.csdn.net/yangyun_1999/article/details/38092133

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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>