Please bookmark this page to avoid losing your image tool!

Image Zoom Blur Effect Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Zoom Blur Effect Tool allows users to apply a creative zoom blur effect to their images. This effect simulates a camera zoom by rendering the original image multiple times at varying scales and opacities, centered around a specified point. Users can adjust the intensity of the blur and choose the focal point of the zoom effect. This tool can be useful for enhancing photos, creating dynamic backgrounds, or adding artistic flair to images for social media, websites, or digital artwork.

Leave a Reply

Your email address will not be published. Required fields are marked *