Image Tiffen Ultra Contrast Filter Effect Application

async function processImage(originalImg, strength = 0.3, radius = 10) {
    // Validate and sanitize parameters
    let currentStrength = Number(strength);
    if (isNaN(currentStrength)) {
        currentStrength = 0.3; // Default strength if NaN
    }
    currentStrength = Math.max(0, Math.min(1, currentStrength)); // Clamp strength between 0 and 1

    let currentRadius = Number(radius);
    if (isNaN(currentRadius)) {
        currentRadius = 10; // Default radius if NaN
    }
    currentRadius = Math.max(0, currentRadius); // Radius must be non-negative. blur(0px) is valid.

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

    if (width === 0 || height === 0) {
        // Create a minimal canvas for invalid/empty image input
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        // Optionally, clear it to transparent or a default color
        const emptyCtx = emptyCanvas.getContext('2d');
        if (emptyCtx) {
            emptyCtx.clearRect(0, 0, 1, 1);
        }
        return emptyCanvas;
    }

    // Create a canvas for the blurred version of the image
    const blurredCanvas = document.createElement('canvas');
    blurredCanvas.width = width;
    blurredCanvas.height = height;
    const ctxBlurred = blurredCanvas.getContext('2d', { willReadFrequently: true });

    if (!ctxBlurred) { // Fallback if context cannot be created
        console.error("Could not create 2D context for blurred canvas.");
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = width;
        fallbackCanvas.height = height;
        const fbCtx = fallbackCanvas.getContext('2d');
        if (fbCtx) fbCtx.drawImage(originalImg, 0, 0, width, height);
        return fallbackCanvas;
    }
    
    // Apply CSS-style blur filter. This affects subsequent drawing operations on this context.
    if (currentRadius > 0) { // Applying blur(0px) is okay but let's be explicit
         ctxBlurred.filter = `blur(${currentRadius}px)`;
    }
    ctxBlurred.drawImage(originalImg, 0, 0, width, height);
    
    let imageDataBlurred;
    try {
        imageDataBlurred = ctxBlurred.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Error getting blurred image data (potential cross-origin issue):", e);
        // Fallback: return a canvas with the original image drawn on it
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = width;
        fallbackCanvas.height = height;
        const fbCtx = fallbackCanvas.getContext('2d');
        if (fbCtx) fbCtx.drawImage(originalImg, 0, 0, width, height);
        return fallbackCanvas;
    }

    // Create the result canvas
    const resultCanvas = document.createElement('canvas');
    resultCanvas.width = width;
    resultCanvas.height = height;
    const ctxResult = resultCanvas.getContext('2d', { willReadFrequently: true });

    if (!ctxResult) { // Fallback if context cannot be created
        console.error("Could not create 2D context for result canvas.");
        // Return blurred canvas as a partial result if available, or original
        if(imageDataBlurred) ctxBlurred.putImageData(imageDataBlurred, 0, 0); // Draw blurred if available
        else ctxBlurred.drawImage(originalImg, 0, 0, width, height); // Else original
        return blurredCanvas; // Return the blurred canvas or original on blurredCanvas
    }

    // Draw the original image onto the result canvas to get its pixel data
    ctxResult.drawImage(originalImg, 0, 0, width, height);
    
    let imageDataResult;
    try {
        imageDataResult = ctxResult.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Error getting original image data for result canvas (potential cross-origin issue):", e);
        // Fallback: return a canvas with the original image (already drawn on ctxResult)
        return resultCanvas;
    }
    
    const dataResult = imageDataResult.data;
    const dataBlurred = imageDataBlurred.data;

    // If strength is 0 or radius is 0 (resulting in no effective blur), no change is needed.
    // dataBlurred would be identical to dataResult if radius is 0.
     if (currentStrength === 0 || (currentRadius === 0 && ctxBlurred.filter === 'none')) { // ctx.filter might still be 'blur(0px)'
        // No operation needed, original image is already on resultCanvas
        return resultCanvas;
    }


    for (let i = 0; i < dataResult.length; i += 4) {
        const rOrig = dataResult[i];
        const gOrig = dataResult[i + 1];
        const bOrig = dataResult[i + 2];
        // Alpha (dataResult[i+3]) will be preserved from the original image

        const rBlurred = dataBlurred[i];
        const gBlurred = dataBlurred[i + 1];
        const bBlurred = dataBlurred[i + 2];

        let rNew = rOrig;
        let gNew = gOrig;
        let bNew = bOrig;

        // Process Red channel
        const diffR = rBlurred - rOrig;
        if (diffR > 0) { // If blurred component is brighter, lift original towards it
            rNew = rOrig + currentStrength * diffR;
        }
        // Else (rBlurred <= rOrig), original is a highlight or flat area relative to surroundings; leave highlight largely unaffected.

        // Process Green channel
        const diffG = gBlurred - gOrig;
        if (diffG > 0) {
            gNew = gOrig + currentStrength * diffG;
        }

        // Process Blue channel
        const diffB = bBlurred - bOrig;
        if (diffB > 0) {
            bNew = bOrig + currentStrength * diffB;
        }
        
        dataResult[i]     = Math.max(0, Math.min(255, Math.round(rNew)));
        dataResult[i + 1] = Math.max(0, Math.min(255, Math.round(gNew)));
        dataResult[i + 2] = Math.max(0, Math.min(255, Math.round(bNew)));
        // dataResult[i+3] (alpha) remains untouched from original image as loaded into imageDataResult
    }

    ctxResult.putImageData(imageDataResult, 0, 0);
    return resultCanvas;
}