Image Zoom Blur Filter

async function processImage(originalImg, strength = 0.2, centerXPercent = 0.5, centerYPercent = 0.5, samples = 30) {
    // Ensure the image is loaded before proceeding
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        // This means the image is not yet loaded or failed to load (e.g. broken image or src not set).
        // We'll try to wait for it to load, assuming 'src' is set and valid.
        try {
            await new Promise((resolve, reject) => {
                // Check if already loaded by another concurrent check or if src is truly absent
                if (originalImg.complete && originalImg.naturalWidth !== 0) {
                    resolve();
                    return;
                }
                // An image with no src will never load.
                if (!originalImg.src) {
                    reject(new Error('Image src is not set.'));
                    return;
                }

                const loadHandler = () => {
                    cleanup();
                    resolve();
                };
                const errorHandler = (errEvent) => {
                    cleanup();
                    reject(new Error('Image could not be loaded. Error: ' + (errEvent ? errEvent.type : 'unknown')));
                };
                const cleanup = () => {
                    originalImg.removeEventListener('load', loadHandler);
                    originalImg.removeEventListener('error', errorHandler);
                };

                originalImg.addEventListener('load', loadHandler);
                originalImg.addEventListener('error', errorHandler);
            });
        } catch (error) {
            console.error("Image processing error during load:", error);
            // Propagate the error. The caller should decide how to handle it.
            throw error;
        }
    }

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

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

    // Sanitize parameters passed to the function (parse from string if necessary, apply defaults, clamp)
    let pStrength = Number(strength);
    if (isNaN(pStrength)) { pStrength = 0.2; } // Default strength if parsing failed
    pStrength = Math.max(-0.99, pStrength); // Clamp strength to keep scale computations positive (e.g., scale > 0.01)

    let pCenterXPercent = Number(centerXPercent);
    if (isNaN(pCenterXPercent)) { pCenterXPercent = 0.5; } // Default center X
    pCenterXPercent = Math.max(0.0, Math.min(1.0, pCenterXPercent)); // Clamp to [0,1] range

    let pCenterYPercent = Number(centerYPercent);
    if (isNaN(pCenterYPercent)) { pCenterYPercent = 0.5; } // Default center Y
    pCenterYPercent = Math.max(0.0, Math.min(1.0, pCenterYPercent)); // Clamp to [0,1] range

    let pSamples = Math.floor(Number(samples));
    if (isNaN(pSamples) || pSamples <= 0) { pSamples = 30; } // Default samples if parsing failed or invalid value
    pSamples = Math.max(1, pSamples); // Ensure samples is at least 1


    // Calculate absolute center coordinates for the zoom effect based on percentage parameters
    const cx = pCenterXPercent * width;
    const cy = pCenterYPercent * height;

    // If strength is effectively zero, or if the image has no dimensions,
    // no blur effect is applied. Draw the original image directly (if it has dimensions) and return.
    if (Math.abs(pStrength) < 0.001 || width === 0 || height === 0) {
        if (width > 0 && height > 0) { // Only attempt to draw if image has positive dimensions
           ctx.drawImage(originalImg, 0, 0, width, height);
        }
        return canvas; // Return the (possibly empty, or originally drawn) canvas
    }
    
    // Set rendering properties for blur effect
    // By default, imageSmoothingEnabled is true. Quality can sometimes be specified.
    // ctx.imageSmoothingEnabled = true; 
    // ctx.imageSmoothingQuality = "high"; // "low", "medium", "high" - browser/implementation dependent

    // Each layer contributes partially to the final image.
    // The sum of alphas for all layers should approximate 1 for a proper blend.
    ctx.globalAlpha = 1.0 / pSamples; 

    for (let i = 0; i < pSamples; i++) {
        let t; // Interpolation factor for current sample, ranging from 0 (no effect) to 1 (full effect)
        if (pSamples === 1) {
            // If only one sample, it's like taking the "base" of the blur, effectively no displacement.
            t = 0.0; 
        } else {
            // Distributes samples linearly from t=0 (first sample) to t=1 (last sample)
            t = i / (pSamples - 1); 
        }

        // currentSampleZoomAmount determines how much this layer is scaled relative to base (scale=1)
        // It's proportional to the overall strength and the sample's position (t)
        const currentSampleZoomAmount = t * pStrength;
        const scale = 1.0 + currentSampleZoomAmount; // Scale factor for this layer

        // Calculate drawing parameters for this scaled layer.
        // The image is scaled relative to its zoom center (cx, cy), so that point remains fixed.
        // Top-left corner (drawX, drawY) for drawImage:
        const drawX = cx * (1 - scale);
        const drawY = cy * (1 - scale);
        // Dimensions for drawImage:
        const drawWidth = width * scale;
        const drawHeight = height * scale;
        
        // Draw the scaled image layer onto the canvas.
        // Clamping pStrength ensures scale is always positive, so drawWidth/Height remain positive
        // if original width/height are positive.
        ctx.drawImage(originalImg, drawX, drawY, drawWidth, drawHeight);
    }

    // Reset globalAlpha to its default value (1.0) for any subsequent drawing operations on this context (if any).
    ctx.globalAlpha = 1.0;

    return canvas;
}