Home/ Questions/Q 7592881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:01:04+00:00

im trying to create a script that changes the color of images, i found

  • 0

im trying to create a script that changes the color of images, i found a way to change the color, but since the images have a white background it changes ALL of the image, is it possible to ignore the white pixels somehow?

This is the code so far:

    <!doctype html>
<html>
<head>

</head>

<body>
<h4>Original Image</h4>
<img id="testImage" src='../src/test.png'/>

<h4>Image copied to canvas</h4>
<canvas id="canvas" width="500" height="500"></canvas>

<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>

<script>

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,150]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);


var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Would something like this work for you? 

        if (pix[i] == 255 &&  
        pix[i+1] == 255 &&
        pix[i+2] == 255)
    {
    //pixel is white
    }
    else
    {
    //pixel is not white, modify it.
    }
    • 0