Image Motorization Tool

/**
 * Applies a "motorization" effect (radial/zoom blur with a warm tint) to an image.
 * This effect is inspired by a popular internet meme with the catchphrase "Моторризируюсь!".
 *
 * @param {Image} originalImg The source HTML Image object.
 * @param {number} [strength=0.8] The intensity of the blur effect, from 0.0 (no blur) to 1.0 (max blur).
 * @param {number} [centerX=0.5] The horizontal center of the blur, as a fraction of image width (0.0 to 1.0).
 * @param {number} [centerY=0.5] The vertical center of the blur, as a fraction of image height (0.0 to 1.0).
 * @param {string} [colorTint='#FFA500'] A CSS color string for the tint overlay. Set to an empty string to disable.
 * @param {number} [tintOpacity=0.25] The opacity of the color tint, from 0.0 to 1.0.
 * @returns {HTMLCanvasElement} A new canvas element with the effect applied.
 */
function processImage(originalImg, strength = 0.8, centerX = 0.5, centerY = 0.5, colorTint = '#FFA500', tintOpacity = 0.25) {
    // 1. Parameter Validation & Sanitization
    const cleanStrength = Math.max(0, Math.min(1, Number(strength) || 0));
    const cleanCenterX = Math.max(0, Math.min(1, Number(centerX) || 0.5));
    const cleanCenterY = Math.max(0, Math.min(1, Number(centerY) || 0.5));
    const cleanTintOpacity = Math.max(0, Math.min(1, Number(tintOpacity) || 0));

    // 2. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for the original, undistorted image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Enable image smoothing for better quality scaling
    ctx.imageSmoothingQuality = 'high';
    ctx.imageSmoothingEnabled = true;

    // 3. Blur Effect Implementation
    if (cleanStrength > 0) {
        // Center point in pixels
        const centerPxX = width * cleanCenterX;
        const centerPxY = height * cleanCenterY;

        // Number of layers to blend for the blur effect. More steps = smoother but slower.
        const steps = 30;

        // The maximum zoom scale. A strength of 1.0 maps to a 30% zoom.
        const maxScale = 1.0 + cleanStrength * 0.3;

        // Set a base alpha for each blur layer. The total opacity of the blur
        // will build up as layers are stacked on a transparent background.
        ctx.globalAlpha = (1.0 / steps) * cleanStrength;

        // Draw the blurred layers first, from slightly scaled to largest.
        // This creates the "zoom" trail effect behind the main subject.
        for (let i = 0; i < steps; i++) {
            // Use a non-linear distribution (ratio^2) to make the blur stronger at the edges
            const ratio = (i + 1) / steps;
            const scale = 1.0 + (maxScale - 1.0) * (ratio * ratio);

            const w = width * scale;
            const h = height * scale;
            const x = centerPxX - w / 2;
            const y = centerPxY - h / 2;

            ctx.drawImage(originalImg, x, y, w, h);
        }
    }

    // 4. Draw the original sharp image on top of the blur
    ctx.globalAlpha = 1.0;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 5. Apply the color tint overlay
    if (cleanTintOpacity > 0 && typeof colorTint === 'string' && colorTint) {
        ctx.globalAlpha = cleanTintOpacity;
        ctx.fillStyle = colorTint;
        ctx.fillRect(0, 0, width, height);
    }

    // Restore context to default state for safety
    ctx.globalAlpha = 1.0;

    // 6. Return the resulting canvas
    return canvas;
}