Image Channel For Videos

/**
 * Extracts a specific color channel from an image or converts it to grayscale.
 * The "for Videos" in the title suggests this operation is often applied to video frames,
 * but this function processes a single static image.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {string} channel The channel to extract. Can be 'red', 'green', 'blue', or 'grayscale'. Defaults to 'grayscale'.
 * @returns {HTMLCanvasElement|HTMLParagraphElement} A new canvas element with the processed image, or a paragraph with an error message.
 */
function processImage(originalImg, channel = 'grayscale') {
    // Create a new canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    let imageData;
    try {
        // Get the pixel data from the canvas. This can fail for cross-origin images.
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data:", e);
        const errorElement = document.createElement('p');
        errorElement.textContent = 'Could not process the image, possibly due to cross-origin restrictions. Please use an image from the same domain or a server that provides CORS headers.';
        errorElement.style.color = 'red';
        return errorElement;
    }

    const data = imageData.data;
    const lowerCaseChannel = channel.toLowerCase();

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

        switch (lowerCaseChannel) {
            case 'red':
                // Use the red channel's value for all three color channels to create a grayscale representation of its intensity
                data[i] = r;
                data[i + 1] = r;
                data[i + 2] = r;
                break;
            case 'green':
                // Use the green channel's value for all three color channels
                data[i] = g;
                data[i + 1] = g;
                data[i + 2] = g;
                break;
            case 'blue':
                // Use the blue channel's value for all three color channels
                data[i] = b;
                data[i + 1] = b;
                data[i + 2] = b;
                break;
            case 'grayscale':
            default:
                // Convert to grayscale using the standard luminance formula (weights for human eye perception)
                // L = 0.299*R + 0.587*G + 0.114*B
                const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
                data[i] = gray;
                data[i + 1] = gray;
                data[i + 2] = gray;
                break;
        }
    }

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

    // Return the canvas with the processed image
    return canvas;
}