Image Wratten #12 Yellow Filter Effect Tool

/**
 * Applies a Wratten #12 Yellow Filter effect to an image.
 * Wratten #12 is a deep yellow filter that primarily absorbs blue light.
 * This effect simulates this by significantly reducing the blue channel of each pixel.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @returns {HTMLCanvasElement} A new canvas element with the filter effect applied.
 */
function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available for the actual image dimensions,
    // otherwise fallback to width/height (which might be CSS-styled dimensions).
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    // Draw the original image onto the canvas.
    // This is necessary to access its pixel data.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get the ImageData object, which contains pixel data in a Uint8ClampedArray.
    // The data is stored as [R1, G1, B1, A1, R2, G2, B2, A2, ...].
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // The Wratten #12 filter is a "minus blue" filter, meaning it strongly absorbs blue light.
    // We simulate this by multiplying the blue channel value of each pixel by a small factor.
    // A factor of 0.1 means the filter transmits about 10% of blue light (absorbs 90%).
    // This value is chosen to represent a deep yellow filter effect.
    // For reference, some simulations (e.g., in ray tracing contexts) might use even smaller factors
    // like 0.02 for Wratten #12. We'll use 0.1 for a strong but not extreme effect.
    const blueChannelFactor = 0.1;

    for (let i = 0; i < data.length; i += 4) {
        // data[i] is the Red component
        // data[i+1] is the Green component
        // data[i+2] is the Blue component
        // data[i+3] is the Alpha component

        // For a yellow filter effect, the Red and Green channels typically remain unchanged
        // or are sometimes slightly adjusted depending on the specific simulation model.
        // Here, we only modify the Blue channel to simulate the "minus blue" characteristic.
        // data[i] = data[i]; // Red - unchanged
        // data[i+1] = data[i+1]; // Green - unchanged
        
        // Reduce the intensity of the blue channel.
        data[i+2] = data[i+2] * blueChannelFactor;

        // The 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;
}