Please bookmark this page to avoid losing your image tool!

Image Motorization 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 "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;
}

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 Motorization Tool applies a unique motorization effect to images, creating a radial or zoom blur combined with a warm color tint. This tool allows users to enhance their images by adding a dynamic motion feel, reminiscent of popular internet memes. It can be used for various purposes, such as creating eye-catching profile pictures, enhancing social media graphics, or adding a creative touch to digital artwork. Users can customize the intensity of the blur effect, the center point of the blur, and the color tint, making it versatile for different creative needs.

Leave a Reply

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