Image Wratten #25 Red Filter Effect Tool

function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use the natural dimensions of the image to set canvas size
    // This ensures the canvas matches the actual image resolution
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Guard against unloaded or zero-dimension images, though typically
    // the caller should ensure originalImg is a fully loaded Image object.
    if (width === 0 || height === 0) {
        console.warn("Original image has zero width or height. Canvas will be 1x1.");
        canvas.width = 1;
        canvas.height = 1;
        // Optionally, one could throw an error here or return originalImg if it's an error state
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // Get the ImageData object, which contains the pixel data in a flat array
    // The data is stored in RGBA order (Red, Green, Blue, Alpha)
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data.
    // Each pixel consists of 4 bytes (R, G, B, A), so we increment by 4.
    for (let i = 0; i < data.length; i += 4) {
        // const r = data[i];     // Red component (0-255)
        // const g = data[i + 1]; // Green component (0-255)
        // const b = data[i + 2]; // Blue component (0-255)
        // const a = data[i + 3]; // Alpha component (0-255)

        // Simulate the Wratten #25 Red Filter effect:
        // This filter strongly absorbs blue and green light, allowing red light to pass.
        // A common digital simulation is to keep the red channel and set green and blue to 0.
        // Red channel (data[i]) remains unchanged.
        data[i + 1] = 0; // Set Green component to 0
        data[i + 2] = 0; // Set Blue component to 0
        // Alpha channel (data[i + 3]) remains unchanged to preserve transparency.
    }

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

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