Pixel Manipulation does not work on some images

Question

I am trying to extract only white text from the image using pixel manipulation but it does not work on some images. It works on https://prnt.sc/24q29qu but not on https://prnt.sc/24pymne Please see the code used and you may just paste the code in the console to see the output. Tested it on chrome browser. You may click on the output in the console to see the image output.

    var imageSource = document.querySelector("body > div.image-constrain.js-image-wrap > div > div > img")

    var width = 2*imageSource.width;
    var height = 2*imageSource.height;

    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = imageSource.src;
    var c = document.createElement("canvas")
    c.width = width;
    c.height = height;
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var imageData = ctx.getImageData(0, 0, width, height);
    var data = imageData.data;
    console.log(data);
    // Replacing All the pixels except white
    for (let i = 0; i < data.length; i += 4) {
        if(data[i] != 255) {
            data[i] = 0;
        }
        if(data[i+1] != 255) {
            data[i+1] = 0;
        }
        if(data[i+2] != 255) {
            data[i+2] = 0;
        }
        if(data[i+3] != 255) {
            data[i+3] = 0;
        }
    }

    console.log(imageData.data);  
     ctx.putImageData(imageData, 0, 0);


        img.src = c.toDataURL();
        pixelatedImage = c.toDataURL();
        console.log(pixelatedImage);

Answer 1

Your code is not targeting white pixels, it is targeting each Red Green Blue and Alpha channels that are not 255 and set these channels to 0.

This means that if you have a red #FF0000 pixel, it will stay unchanged (Red is #FF (255) and thus won't be targeted, G & B are already 0, and Alpha is 255 too, so untargeted.

In your image, the Green channel of the green part is 255, so it's untargeted. However its Red channel is neither 0 nor 255, and you can see that the green color actually does change.

(async() => {
  const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
  if (!resp.ok) {
    throw resp.status;
  }
  const blob = await resp.blob();
  const image = await createImageBitmap(blob);
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0, 0);
  document.body.append(canvas);
  const [r,g,b,a] = ctx.getImageData(0, 0, 1, 1).data;
  console.log({r,g,b,a});
})().catch(console.error);

To target white pixels, you need to check that the four RGBA channels are all 255, not one at a time.

(async() => {
  const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
  if (!resp.ok) {
    throw resp.status;
  }
  const blob = await resp.blob();
  const image = await createImageBitmap(blob);
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0, 0);
  document.body.append(canvas);
  const img = ctx.getImageData(0, 0, image.width, image.height);
  const imgdata = img.data;
  for (let i = 0; i<imgdata.length; i+=4) {
    if (
      imgdata[i  ] !== 255 ||
      imgdata[i+1] !== 255 ||
      imgdata[i+2] !== 255 ||
      imgdata[i+3] !== 255
    ) {
      imgdata[i  ] =
      imgdata[i+1] =
      imgdata[i+2] =
      imgdata[i+3] = 0;
    }
  }
  ctx.putImageData(img, 0, 0);
})().catch(console.error);

But you can do this in a more performant way by using an Uint32Array view over the ImageData's .data to treat each full pixel as a single entry, a white pixel would be 0xFFFFFFFF (beware though if you want to target an other color, the order is now 0xAAGGBBRR).

(async() => {
  const resp = await fetch("https://i.ibb.co/ZKnmnT6/image.png");
  if (!resp.ok) {
    throw resp.status;
  }
  const blob = await resp.blob();
  const image = await createImageBitmap(blob);
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0, 0);
  document.body.append(canvas);
  const img = ctx.getImageData(0, 0, image.width, image.height);
  const imgdata = new Uint32Array(img.data.buffer);
  for (let i = 0; i<imgdata.length; i++) {
    if (imgdata[i] !== 0xFFFFFFFF) {
      imgdata[i] = 0x00000000;
    }
  }
  ctx.putImageData(img, 0, 0);
})().catch(console.error);