Image Color Channel Inspector

/**
 * Creates a visual representation of an image, showing only the selected color channels.
 *
 * @param {HTMLImageElement} originalImg - The source image object.
 * @param {number | string} showR - Set to 1 to show the Red channel, 0 to hide. Defaults to 1.
 * @param {number | string} showG - Set to 1 to show the Green channel, 0 to hide. Defaults to 1.
 * @param {number | string} showB - Set to 1 to show the Blue channel, 0 to hide. Defaults to 1.
 * @param {number | string} showA - Set to 1 to show the Alpha channel, 0 to hide. Defaults to 1.
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
function processImage(originalImg, showR = 1, showG = 1, showB = 1, showA = 1) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const imgWidth = originalImg.naturalWidth || originalImg.width;
  const imgHeight = originalImg.naturalHeight || originalImg.height;

  canvas.width = imgWidth;
  canvas.height = imgHeight;

  try {
    // Draw the image to the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    // Coerce parameters to boolean-like flags for easier checking
    const displayR = Number(showR) !== 0;
    const displayG = Number(showG) !== 0;
    const displayB = Number(showB) !== 0;
    const displayA = Number(showA) !== 0;

    // Special case: If only the alpha channel is selected, display it as a grayscale image
    const onlyShowA = !displayR && !displayG && !displayB && displayA;

    // Iterate over each pixel (4 bytes: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
      if (onlyShowA) {
        const alpha = data[i + 3];
        // Set R, G, and B channels to the alpha value to create a grayscale representation
        data[i] = alpha;     // Red
        data[i + 1] = alpha; // Green
        data[i + 2] = alpha; // Blue
        data[i + 3] = 255;   // Make it fully opaque to see the result clearly
      } else {
        // Otherwise, mute the channels that are not selected
        if (!displayR) data[i] = 0;
        if (!displayG) data[i + 1] = 0;
        if (!displayB) data[i + 2] = 0;
        // If alpha is not displayed, make the pixel fully opaque to avoid confusion
        if (!displayA) data[i + 3] = 255;
      }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

  } catch (e) {
    // Handle potential CORS issues when using getImageData with cross-origin images
    console.error("Could not process image due to cross-origin restrictions:", e);
    ctx.font = "16px sans-serif";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    const message = "Cannot process cross-origin image.";
    ctx.fillText(message, canvas.width / 2, canvas.height / 2);
  }

  return canvas;
}