Photo Telephoto Lens Compression Filter Effect Tool

function processImage(originalImg, zoomFactorParam = 1.5, blurAmountParam = 5, focusAreaRatioParam = 0.4) {
    let zoomFactor = Number(zoomFactorParam);
    let blurAmount = Number(blurAmountParam);
    let focusAreaRatio = Number(focusAreaRatioParam);

    // Apply default values if parsing parameters resulted in NaN
    if (isNaN(zoomFactor)) zoomFactor = 1.5;
    if (isNaN(blurAmount)) blurAmount = 5;
    if (isNaN(focusAreaRatio)) focusAreaRatio = 0.4;

    // Clamp parameter values to sensible ranges
    zoomFactor = Math.max(1, zoomFactor); // Zoom factor must be at least 1 (no zoom or zoom in)
    blurAmount = Math.max(0, blurAmount); // Blur amount cannot be negative
    focusAreaRatio = Math.max(0, Math.min(1, focusAreaRatio)); // Focus area ratio is between 0 and 1

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    const imgWidth = (originalImg.naturalWidth && originalImg.naturalWidth > 0) ? originalImg.naturalWidth : originalImg.width;
    const imgHeight = (originalImg.naturalHeight && originalImg.naturalHeight > 0) ? originalImg.naturalHeight : originalImg.height;

    // Handle unloaded or zero-size images gracefully
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Photo Telephoto Lens Effect: Image dimensions are zero. Ensure the image is loaded and has valid dimensions.");
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1; // Return a minimal 1x1 transparent canvas
        emptyCanvas.height = 1;
        const emptyCtx = emptyCanvas.getContext('2d');
        if (emptyCtx) {
            emptyCtx.fillStyle = 'rgba(0,0,0,0)';
            emptyCtx.fillRect(0, 0, 1, 1);
        }
        return emptyCanvas;
    }

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

    if (!ctx) {
        console.error("Photo Telephoto Lens Effect: Could not get 2D context from anvas.");
        // Fallback: return a copy of the original image (or the image itself if copy fails)
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = imgWidth;
        fallbackCanvas.height = imgHeight;
        const fallbackCtx = fallbackCanvas.getContext('2d');
        if (fallbackCtx) {
            try {
                fallbackCtx.drawImage(originalImg, 0, 0);
                return fallbackCanvas;
            } catch (e) {
                // If drawImage fails, this path is problematic
            }
        }
        return originalImg; // Should be an HTMLImageElement, may try to display as is.
    }

    // Calculate cropping parameters for the zoom effect (cropping from the center)
    const cropWidth = imgWidth / zoomFactor;
    const cropHeight = imgHeight / zoomFactor;
    const cropX = (imgWidth - cropWidth) / 2;
    const cropY = (imgHeight - cropHeight) / 2;

    // Create an offscreen canvas for the sharp, zoomed image
    const sharpLayer = document.createElement('canvas');
    sharpLayer.width = imgWidth;
    sharpLayer.height = imgHeight;
    const slCtx = sharpLayer.getContext('2d');
     if (!slCtx) {
        console.error("Photo Telephoto Lens Effect: Could not get 2D context for sharp layer. Returning original image.");
        ctx.drawImage(originalImg, 0,0); // Draw original un-processed image to main canvas
        return canvas; 
    }
    slCtx.drawImage(originalImg, cropX, cropY, cropWidth, cropHeight, 0, 0, imgWidth, imgHeight);

    // If no blur is needed (blurAmount is 0 or focus area covers the whole image),
    // simply draw the sharp zoomed image and return.
    if (blurAmount === 0 || focusAreaRatio >= (1.0 - 1e-6)) { // Using 1.0 - epsilon for "fully sharp"
        ctx.drawImage(sharpLayer, 0, 0);
        return canvas;
    }

    // Create an offscreen canvas for the blurred, zoomed image
    const blurredLayer = document.createElement('canvas');
    blurredLayer.width = imgWidth;
    blurredLayer.height = imgHeight;
    const blCtx = blurredLayer.getContext('2d');
    if (!blCtx) {
        console.error("Photo Telephoto Lens Effect: Could not get 2D context for blur layer. Returning sharp zoomed image.");
        ctx.drawImage(sharpLayer, 0,0); // Draw sharp layer as fallback
        return canvas; 
    }

    blCtx.filter = `blur(${blurAmount}px)`;
    blCtx.drawImage(originalImg, cropX, cropY, cropWidth, cropHeight, 0, 0, imgWidth, imgHeight);
    blCtx.filter = 'none'; // Reset filter to avoid affecting subsequent draws on this context

    // --- Composite the layers ---
    // 1. Draw the fully blurred layer as the base on the main canvas
    ctx.drawImage(blurredLayer, 0, 0);

    // 2. Prepare the mask for the sharpLayer.
    // The sharpLayer already contains the zoomed sharp image.
    // We will apply a radial gradient mask to its alpha channel.
    slCtx.globalCompositeOperation = 'destination-in';
    
    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;
    // Radius for the gradient mask, based on the smaller dimension of the image
    const minDimRadius = Math.min(imgWidth, imgHeight) / 2;

    if (minDimRadius <= 0) {
        // If image is effectively 1D or 0D (e.g., 1xN, N_x1, 0x0), no radius for gradient.
        // In this case, the mask should be fully opaque, meaning sharpLayer is fully shown.
        slCtx.fillStyle = 'rgba(0,0,0,1)';
    } else {
        // Radius where the image is perfectly sharp (mask is fully opaque)
        const r0_sharp = minDimRadius * focusAreaRatio;
        // Radius where the image is fully blurred (mask is fully transparent for sharpLayer)
        const r1_blur = minDimRadius;
        
        // If r0_sharp is very close to or exceeds r1_blur, the mask should be fully opaque.
        // This handles focusAreaRatio = 1 or cases where precision makes them effectively equal.
        // The check `focusAreaRatio >= (1.0 - 1e-6)` above handles perfect "fully sharp" cases.
        // This is a safeguard for the gradient creation.
        if (r0_sharp >= r1_blur - 1e-6) { // Use a small epsilon for floating point comparison
            slCtx.fillStyle = 'rgba(0,0,0,1)';
        } else {
            const gradientMask = slCtx.createRadialGradient(centerX, centerY, r0_sharp, centerX, centerY, r1_blur);
            gradientMask.addColorStop(0, 'rgba(0,0,0,1)'); // Opaque at r0_sharp (center of focus transition)
            gradientMask.addColorStop(1, 'rgba(0,0,0,0)'); // Transparent at r1_blur (edge of focus transition)
            slCtx.fillStyle = gradientMask;
        }
    }
    
    slCtx.fillRect(0, 0, imgWidth, imgHeight); // Apply the gradient mask to sharpLayer's alpha
    slCtx.globalCompositeOperation = 'source-over'; // Reset composite operation for sharpLayer context

    // 3. Draw the masked sharpLayer on top of the blurredLayer on the main canvas
    ctx.drawImage(sharpLayer, 0, 0);

    return canvas;
}