Image Yellowed Filter Effect Tool

function processImage(originalImg, strength = 0.4, yellowColor = "255,255,204") {

    const width = originalImg.width || originalImg.naturalWidth;
    const height = originalImg.height || originalImg.naturalHeight;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Handle cases where the image might not be fully loaded or has invalid dimensions.
    if (!width || !height) {
        console.warn("Image has zero width or height. Returning canvas as is (possibly 0x0 or with one dimension 0).");
        // The canvas is already created with these (potentially zero) dimensions.
        // Returning it directly avoids errors in drawImage.
        return canvas;
    }

    // Validate and clamp the strength parameter.
    // Strength determines how much of the yellow tint is applied (0 for none, 1 for full).
    let currentStrength = strength;
    if (typeof currentStrength !== 'number' || isNaN(currentStrength)) {
        // Fallback to the default strength if the provided value is invalid.
        console.warn(`Invalid strength value: ${strength}. Using default 0.4.`);
        currentStrength = 0.4; 
    }
    currentStrength = Math.max(0, Math.min(1, currentStrength));

    // Validate and parse the yellowColor parameter.
    // yellowColor is expected as an "R,G,B" string (e.g., "255,255,204").
    // Default is #FFFFCC (255,255,204), a pale yellow like aged paper.
    const fallbackYellowRGB = [255, 255, 204]; 
    let rTint = fallbackYellowRGB[0], gTint = fallbackYellowRGB[1], bTint = fallbackYellowRGB[2];

    if (typeof yellowColor === 'string') {
        const parts = yellowColor.split(',').map(s => parseInt(s.trim(), 10));
        if (parts.length === 3 && parts.every(p => !isNaN(p) && p >= 0 && p <= 255)) {
            [rTint, gTint, bTint] = parts;
        } else {
            console.warn(`Invalid yellowColor string: "${yellowColor}". Using default rgb(${fallbackYellowRGB.join(',')}).`);
            // rTint, gTint, bTint are already set to fallbackYellowRGB values.
        }
    } else {
        // Fallback to default yellow if yellowColor is not a string.
        console.warn(`yellowColor is not a string: ${yellowColor}. Using default rgb(${fallbackYellowRGB.join(',')}).`);
        // rTint, gTint, bTint are already set to fallbackYellowRGB values.
    }
    const tintColorString = `rgb(${rTint},${gTint},${bTint})`;

    // If strength is 0, no effect is needed. Draw the original image and return.
    if (currentStrength === 0) {
        ctx.drawImage(originalImg, 0, 0, width, height);
        return canvas;
    }

    // Create a temporary canvas to hold the fully yellow-tinted version of the image.
    // The `alpha` option for getContext is true by default, preserving transparency.
    const tintedCanvas = document.createElement('canvas');
    tintedCanvas.width = width;
    tintedCanvas.height = height;
    const tintedCtx = tintedCanvas.getContext('2d');

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

    // 2. Apply the 'color' composite operation effect.
    // This operation takes the LUMINOSITY of the backdrop (the original image pixels)
    // and combines it with the HUE and SATURATION of the source (the fillStyle color).
    tintedCtx.globalCompositeOperation = 'color';
    tintedCtx.fillStyle = tintColorString;
    tintedCtx.fillRect(0, 0, width, height);
    
    // Reset composite operation to default (good practice).
    tintedCtx.globalCompositeOperation = 'source-over';

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

    // 4. Blend the fully tinted version (from tintedCanvas) onto the main canvas.
    // The 'currentStrength' acts as globalAlpha, controlling the opacity of the tinted layer.
    // This achieves the blend: FinalColor = OriginalColor * (1-strength) + TintedColor * strength.
    ctx.globalAlpha = currentStrength;
    ctx.drawImage(tintedCanvas, 0, 0, width, height);
    
    // Reset globalAlpha to its default value for subsequent drawing operations (if any).
    ctx.globalAlpha = 1.0; 
    
    return canvas;
}