Image Processing 3. Negate filter, channel extraction and inversion

In this article we'll split images into color components, create a negate filter, and invert individual channels. Finally, we'll manipulate RGB components!

Previous Homework Assignment#

Let's revisit the homework assignment from the previous article. The task was to implement simultaneous horizontal and vertical flipping. Here's the solution:

for (let i = 0; i < dst.length; i++) {
  dst[i] = src[dst.length - i - 1];
}

Yes, it's simply reversing the array, but in the context of images, it flips pixels along both axes. See this visual example: CodePen. Image processing 2. Solution

Channel Extraction#

We'll split a full-color image into four separate images. The first will contain only red components, the second only green, and the third only blue:

// Red
for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  dst[i] = 0xFF000000 | r;
}
// Green
for (let i = 0; i < dst.length; i++) {
  let g = (src[i] >> 8) & 0xFF;
  dst[i] = 0xFF000000 | (g << 8);
}
// Blue
for (let i = 0; i < dst.length; i++) {
  let b = (src[i] >> 16) & 0xFF;
  dst[i] = 0xFF000000 | (b << 16);
}

Transparency, which is stored in the high-order 8 bits, is forcibly set to 255 (0xFF) here. It could also be written as:

dst[i] = (255 << 24) | (b << 16);

The fourth image will contain only the alpha channel with black colors:

for (let i = 0; i < dst.length; i++) {
  let a = (src[i] >> 24) & 0xFF;
  dst[i] = (a << 24);
}

For demonstration, we'll use a photo kindly provided by vl@volk:

Since photo is predominantly green, the green channel appears brighter and more detailed. Bright highlights are visible across all channels because they close to shades of gray, and gray combines all three colors in equal proportions.

Another example (original photo):

The first noticeable thing is the red lighting on the Ferris wheel. It's clearly visible in the red channel and almost invisible in the green and the blue channels. Only where red transitions to lighter tones do green and blue appear.
The yellow reflection on the road is clearly seen in red and green channels since mixing these colors produces yellow.

Homework Assignment#

Modify the output to display red, green, and blue channels in grayscale.

Negate filter and channel inversion#

To create the negative filter, we need to invert the R, G, and B channels. Black (0, 0, 0) should become white (255, 255, 255) and vice versa.

for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;
  let a = (src[i] >> 24) & 0xFF;
  
  r = 255 - r;
  g = 255 - g;
  b = 255 - b;
  
  dst[i] = (src[i] & 0xFF000000) | (b << 16) | (g << 8) | r;
}

We'll also implement single-channel inversion using checkboxes:

let invRed = isChecked('cbRed');
let invGreen = isChecked('cbGreen');
let invBlue = isChecked('cbBlue');
let invAlpha = isChecked('cbAlpha');
for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;
  let a = (src[i] >> 24) & 0xFF;
  
  if (invRed) r = 255 - r;
  if (invGreen) g = 255 - g;
  if (invBlue) b = 255 - b;
  if (invAlpha) a = 255 - a;
  
  dst[i] = (a << 24) | (b << 16) | (g << 8) | r;
}

function isChecked(el) {
  return document.getElementById(el).checked;
}