Please bookmark this page to avoid losing your image tool!

Image Address Icon Generator Tool

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, size = 64, shape = 'square', borderRadius = 12) {
    // Coerce parameters to expected types
    const iconSize = parseInt(size, 10);
    const radius = parseInt(borderRadius, 10);
    const clipShape = String(shape).toLowerCase();

    // Create the canvas for the address icon
    const canvas = document.createElement('canvas');
    canvas.width = iconSize;
    canvas.height = iconSize;
    
    const ctx = canvas.getContext('2d');

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

    ctx.save();

    // Apply specific clipping masks based on the requested shape
    if (clipShape === 'circle') {
        ctx.beginPath();
        ctx.arc(iconSize / 2, iconSize / 2, iconSize / 2, 0, Math.PI * 2);
        ctx.closePath();
        ctx.clip();
    } else if (clipShape === 'rounded' || clipShape === 'round') {
        const r = Math.min(radius, iconSize / 2);
        ctx.beginPath();
        ctx.moveTo(r, 0);
        ctx.lineTo(iconSize - r, 0);
        ctx.quadraticCurveTo(iconSize, 0, iconSize, r);
        ctx.lineTo(iconSize, iconSize - r);
        ctx.quadraticCurveTo(iconSize, iconSize, iconSize - r, iconSize);
        ctx.lineTo(r, iconSize);
        ctx.quadraticCurveTo(0, iconSize, 0, iconSize - r);
        ctx.lineTo(0, r);
        ctx.quadraticCurveTo(0, 0, r, 0);
        ctx.closePath();
        ctx.clip();
    }

    // Determine square bounds to center-crop the original image
    const minDim = Math.min(originalImg.width, originalImg.height);
    const sx = (originalImg.width - minDim) / 2;
    const sy = (originalImg.height - minDim) / 2;

    // Draw and center-crop the original image into the shaped canvas
    ctx.drawImage(originalImg, sx, sy, minDim, minDim, 0, 0, iconSize, iconSize);
    
    ctx.restore();

    return canvas;
}

Free Image Tool Creator

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

Create a custom image tool

Description

The Image Address Icon Generator Tool allows users to transform standard images into customized icons. The tool can resize images to specific dimensions and apply various clipping shapes, such as circles or rounded squares with adjustable corner radii. It automatically center-crops images to ensure a balanced composition within the icon frame. This tool is useful for web developers and designers looking to quickly create profile pictures, UI elements, or favicon-style assets for websites and mobile applications.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: