Image Yellow Filter Black And White Effect Tool

function processImage(originalImg, blueReductionFactor = 0.5) {
    // Ensure blueReductionFactor is within the valid range [0, 1]
    // 0 means no blue reduction (standard black and white)
    // 1 means full blue reduction (strong yellow filter effect)
    const clampedBlueReductionFactor = Math.max(0, Math.min(1, blueReductionFactor));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimized for frequent reads

    // Set canvas dimensions to the image's natural dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Iterate over each pixel (RGBA)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel data[i + 3] is preserved

        // Apply the "yellow filter" by reducing the blue component's contribution
        // This simulates a physical yellow filter which absorbs blue light.
        const modifiedB = b * (1 - clampedBlueReductionFactor);

        // Convert the modified RGB to grayscale using luminance formula (Rec. 709 standard)
        // R, G components are taken as is, B component is the modified one.
        // This makes blue areas darker and red/yellow areas relatively lighter.
        const gray = 0.2126 * r + 0.7152 * g + 0.0722 * modifiedB;

        // Set the pixel to the new grayscale value
        data[i] = gray;     // Red channel
        data[i + 1] = gray; // Green channel
        data[i + 2] = gray; // Blue channel
        // data[i + 3] (alpha) remains unchanged
    }

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

    // Return the canvas element
    return canvas;
}