Image Leica Yellow Filter Effect Application

function processImage(originalImg, strength = 0.5) {
    // Validate and clamp the strength parameter (0.0 to 1.0)
    strength = Math.max(0, Math.min(1, Number(strength)));

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

    // Use naturalWidth/Height for intrinsic image dimensions.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., for a canvas source).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // If strength is 0, no processing needed, return canvas with original image
    if (strength === 0) {
        return canvas;
    }

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // A yellow filter absorbs blue light, making the image appear warmer.
    // The 'strength' parameter controls how much blue is reduced.
    // We define a 'maxBlueReductionFactor' to determine the maximum percentage
    // by which the blue channel can be reduced when strength is 1.
    // For example, 0.8 means blue can be reduced by up to 80% (i.e., blue becomes 20% of original).
    const maxBlueReductionFactor = 0.8; // Blue channel will be multiplied by (1 - strength * maxBlueReductionFactor)

    for (let i = 0; i < data.length; i += 4) {
        // R = data[i]
        // G = data[i+1]
        // B = data[i+2]
        // A = data[i+3]

        const originalBlue = data[i + 2];
        
        // Calculate the reduction multiplier for the blue channel.
        // If strength = 0, blueMultiplier = 1 (no change).
        // If strength = 1, blueMultiplier = 1 - maxBlueReductionFactor.
        const blueMultiplier = 1 - (strength * maxBlueReductionFactor);
        
        data[i + 2] = originalBlue * blueMultiplier;
        
        // Note: Uint8ClampedArray automatically clamps values to [0, 255] and floors them.
    }

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

    return canvas;
}