Image Processing Tool

/**
 * Processes an image by converting it to grayscale.
 * This is a common and fundamental image processing operation.
 *
 * @param {HTMLImageElement} originalImg The original image object to be processed.
 * @returns {HTMLCanvasElement} A new canvas element displaying the grayscale version of the image.
 */
function processImage(originalImg) {
    // Create a new canvas element in memory
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image
    // Using naturalWidth/Height is safer for images that might have CSS styling
    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 pixel data from the entire 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 through each pixel in the data array
    // We increment by 4 because each pixel is represented by 4 values (R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];

        // Apply the luminosity method to calculate the grayscale value,
        // which gives more weight to green as the human eye is most sensitive to it.
        // Formula: gray = 0.299 * R + 0.587 * G + 0.114 * B
        const grayValue = 0.299 * red + 0.587 * green + 0.114 * blue;

        // Set the Red, Green, and Blue channels to the new grayscale value
        data[i] = grayValue;     // Red
        data[i + 1] = grayValue; // Green
        data[i + 2] = grayValue; // Blue
        // The alpha channel (data[i + 3]) remains unchanged
    }

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

    // Return the resulting canvas element
    return canvas;
}