Image Black And White With Green #61 Filter Effect Tool

/**
 * Applies a Black and White with Green #61 Filter effect to an image.
 * This effect typically emphasizes the green channel, making green areas lighter
 * and red/blue areas darker in the resulting black and white image.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @returns {HTMLCanvasElement} A canvas element with the B+W Green #61 filter effect applied.
 */
function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image
    // Ensure originalImg is loaded for naturalWidth/naturalHeight to be available.
    // The problem statement implies originalImg is a loaded Image object.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Iterate over each pixel
    // Each pixel is 4 bytes (R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        // const r = data[i];     // Red channel
        const g = data[i + 1]; // Green channel
        // const b = data[i + 2]; // Blue channel
        // const alpha = data[i + 3]; // Alpha channel

        // The Green #61 filter effect makes the green channel the primary determinant
        // of luminance in the black and white image.
        // Effectively, we use the green channel's value as the grayscale value.
        const grayValue = g;

        // Set the new grayscale value for R, G, B channels
        data[i] = grayValue;     // Red
        data[i + 1] = grayValue; // Green
        data[i + 2] = grayValue; // Blue
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    // Return the canvas with the applied effect
    return canvas;
}