Image Cinemascope Filter Effect Applicator

function processImage(originalImg, aspectRatio = 2.35, saturation = 0.85, tintColor = "rgba(0, 20, 40, 0.1)") {

    // Helper function to parse CSS color string to an array [R, G, B, A_float (0-1)]
    // This helper is defined inside processImage to keep it self-contained.
    function parseColorToArray(colorStr) {
        // Create a temporary 1x1 canvas to draw the color and get its RGBA components.
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');

        // Set a known transparent color first or handle potential invalid colorStr.
        // If colorStr is invalid, fillStyle might not change or default to black.
        // To ensure we can detect if user intended transparency or if parsing failed to transparent:
        // We'll assume valid CSS color strings as input given the constraints.
        // If an invalid color string is provided, `fillStyle` might retain its previous value or become black.
        // For example, if `fillStyle` was "red", and then `fillStyle = "invalid-color"`, it remains "red".
        // So, it's best practice to set `fillStyle` to transparent black first, then the user's color.
        // However, for simplicity, we rely on the canvas parsing. 
        // An invalid color usually results in `rgba(0,0,0,0)` if it's truly unparseable by the engine,
        // or it might be ignored, leaving fillStyle as black (the default for canvas).
        
        tempCtx.fillStyle = colorStr; 
        tempCtx.fillRect(0, 0, 1, 1);
        
        const imageData = tempCtx.getImageData(0, 0, 1, 1).data;
        // imageData is [R, G, B, A_uint8 (0-255)]
        // Convert alpha to a float between 0 and 1.
        return [imageData[0], imageData[1], imageData[2], imageData[3] / 255.0];
    }

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height for HTMLImageElement if available and loaded, otherwise fallback to width/height.
    // This assumes originalImg is a loaded image-like object (HTMLImageElement, HTMLCanvasElement, ImageBitmap).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image dimensions are zero. Ensure image is loaded and valid.");
        // Return an empty canvas or handle error as appropriate
        return canvas; // Returns an empty 0x0 canvas by default
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const ctx = canvas.getContext('2d');

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

    // Parse the tint color string to usable RGBA values
    const parsedTint = parseColorToArray(tintColor);
    const tintR_val = parsedTint[0];
    const tintG_val = parsedTint[1];
    const tintB_val = parsedTint[2];
    const tintA_val = parsedTint[3];

    // Apply saturation and tint effects through pixel manipulation
    // Only get/put image data if there's an actual effect to apply for performance.
    if (saturation !== 1.0 || tintA_val > 0) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // This is a Uint8ClampedArray

        for (let i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i+1];
            let b = data[i+2];

            // Apply saturation
            // saturation = 1.0 means original color, 0.0 means grayscale.
            if (saturation !== 1.0) {
                // Standard luminance weights for grayscale conversion
                const gray = 0.299 * r + 0.587 * g + 0.114 * b;
                // Linearly interpolate between original color and grayscale
                r = r * saturation + gray * (1 - saturation);
                g = g * saturation + gray * (1 - saturation);
                b = b * saturation + gray * (1 - saturation);
            }

            // Apply tint (alpha blending with the tint color)
            // This blends the current_pixel_color with tint_color using tint_alpha.
            if (tintA_val > 0) {
                r = r * (1 - tintA_val) + tintR_val * tintA_val;
                g = g * (1 - tintA_val) + tintG_val * tintA_val;
                b = b * (1 - tintA_val) + tintB_val * tintA_val;
            }
            
            // Values are automatically clamped to 0-255 by Uint8ClampedArray
            data[i] = r;
            data[i+1] = g;
            data[i+2] = b;
            // Alpha channel (data[i+3]) is preserved from original image.
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // Apply letterboxing or pillarboxing to achieve the target aspect ratio
    const currentAspectRatio = canvas.width / canvas.height;
    ctx.fillStyle = 'black'; // Bars are conventionally black

    if (aspectRatio <= 0) { 
        console.warn("Cinemascope: Invalid target aspect ratio provided (" + aspectRatio + "). No bars will be added.");
    } else if (Math.abs(currentAspectRatio - aspectRatio) > 0.001) { // Check if bars are needed (allow for small float inaccuracies)
        if (currentAspectRatio > aspectRatio) {
            // Image is wider than the target aspect ratio, needs pillarboxing (bars on sides)
            const targetContentWidth = canvas.height * aspectRatio;
            const barWidth = (canvas.width - targetContentWidth) / 2;
            if (barWidth > 0) { // Ensure barWidth is positive
                ctx.fillRect(0, 0, barWidth, canvas.height); // Left bar
                ctx.fillRect(canvas.width - barWidth, 0, barWidth, canvas.height); // Right bar
            }
        } else { // currentAspectRatio < aspectRatio
            // Image is taller/narrower than the target aspect ratio, needs letterboxing (bars on top/bottom)
            const targetContentHeight = canvas.width / aspectRatio;
            const barHeight = (canvas.height - targetContentHeight) / 2;
             if (barHeight > 0) { // Ensure barHeight is positive
                ctx.fillRect(0, 0, canvas.width, barHeight); // Top bar
                ctx.fillRect(0, canvas.height - barHeight, canvas.width, barHeight); // Bottom bar
            }
        }
    }
    // If currentAspectRatio is close enough to target aspectRatio, no bars are added.
    
    return canvas;
}