Image Zoom Blur Effect Tool

/**
 * Applies a zoom blur effect to an image.
 * The effect is achieved by rendering the source image multiple times at slightly
 * different scales and opacities, centered on a specified point, to simulate a camera zoom.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} [strength=0.1] The intensity of the blur. A value of 0.1 means the outermost layer is scaled to 110%. Must be non-negative.
 * @param {number} [centerX=0.5] The horizontal center of the zoom effect, as a fraction of the image width (from 0.0 to 1.0).
 * @param {number} [centerY=0.5] The vertical center of the zoom effect, as a fraction of the image height (from 0.0 to 1.0).
 * @returns {HTMLCanvasElement} A new canvas element with the zoom blur effect applied.
 */
function processImage(originalImg, strength = 0.1, centerX = 0.5, centerY = 0.5) {
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    if (!ctx) {
        console.error("Canvas 2D context not available.");
        return canvas; // Return empty canvas
    }

    // Parameters for the effect
    const samples = 30; // Number of layers to blend. More samples = higher quality but slower.
    const effectiveStrength = Math.max(0, strength);

    // Coordinates of the zoom center
    const zoomCenterX = width * Math.max(0, Math.min(1, centerX));
    const zoomCenterY = height * Math.max(0, Math.min(1, centerY));

    // Use high-quality image scaling
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Clear the canvas to start fresh
    ctx.clearRect(0, 0, width, height);
    
    // Set the global alpha for each layer. The sum of alphas approximates the final look.
    ctx.globalAlpha = 1 / samples;

    // Draw the image multiple times, increasing the scale each time
    for (let i = 0; i < samples; i++) {
        // Linearly interpolate the scale from 1.0 to (1.0 + strength)
        const percent = i / (samples - 1 || 1);
        const scale = 1.0 + percent * effectiveStrength;

        // Calculate the top-left position to draw the scaled image.
        // This formula keeps the zoom center point stationary on the canvas.
        const dx = zoomCenterX * (1 - scale);
        const dy = zoomCenterY * (1 - scale);
        const dWidth = width * scale;
        const dHeight = height * scale;

        ctx.drawImage(originalImg, dx, dy, dWidth, dHeight);
    }
    
    // Reset global alpha to default
    ctx.globalAlpha = 1.0;

    return canvas;
}