Please bookmark this page to avoid losing your image tool!

Image Name Studio

(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.
async function processImage(originalImg, textTop = 'НАЗВАНИЕ', textBottom = 'КИНОСТУДИЯ', textColor = '#fdd835', outlineColor = '#000000', fontFamily = 'Cinzel Decorative', topTextSize = 8, bottomTextSize = 5, arcRadius = 40, yOffset = 55, topTextSpread = 1.3, bottomTextSpread = 0.9) {
    /**
     * Dynamically loads a font from Google Fonts.
     * @param {string} fontName - The name of the font to load.
     * @returns {Promise<void>} - A promise that resolves when the font is loaded or fails.
     */
    const loadFont = async(fontName) => {
        const fontId = 'font-' + fontName.replace(/\s+/g, '-').toLowerCase();
        if (document.getElementById(fontId)) {
            return; // Font already loaded or being loaded
        }

        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}:wght@700&display=swap`;
        document.head.appendChild(link);

        try {
            await document.fonts.load(`bold 12px "${fontName}"`);
        } catch (e) {
            console.error(`Font ${fontName} could not be loaded.`, e);
            // In case of failure, we'll proceed with the browser's default serif/sans-serif.
        }
    };

    // Load the specified font
    let effectiveFontFamily = fontFamily;
    try {
        await loadFont(fontFamily);
    } catch (e) {
        effectiveFontFamily = 'Times New Roman'; // Fallback font
    }


    // 1. Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions and draw the background image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    /**
     * Helper function to draw text along an arc.
     * @param {string} text - The text to draw.
     * @param {boolean} isTopArc - True for the top (downward) arc, false for the bottom (upward) arc.
     */
    const drawArchedText = (text, isTopArc) => {
        const sizePercent = isTopArc ? topTextSize : bottomTextSize;
        const spreadRadians = isTopArc ? topTextSpread : bottomTextSpread;

        const fontSize = canvas.width * (sizePercent / 100);
        const radius = canvas.width * (arcRadius / 100);
        const centerX = canvas.width / 2;
        const centerY = canvas.height * (yOffset / 100);

        // Set text styles
        ctx.font = `bold ${fontSize}px "${effectiveFontFamily}", serif`;
        ctx.fillStyle = textColor;
        ctx.strokeStyle = outlineColor;
        ctx.lineWidth = fontSize / 12; // Outline width relative to font size
        ctx.textAlign = 'center';
        ctx.textBaseline = isTopArc ? 'bottom' : 'top';

        // Calculate the starting angle to center the text
        const totalAngle = spreadRadians;
        const anglePerChar = totalAngle / text.length;
        // The angle for the middle of the first character, relative to the top vertical (-PI/2)
        const startAngle = -Math.PI / 2 - totalAngle / 2 + anglePerChar / 2;

        // 3. Draw each character
        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            const charAngle = startAngle + i * anglePerChar;

            ctx.save();
            ctx.translate(centerX, centerY);
            ctx.rotate(charAngle);

            const yPos = isTopArc ? -radius : radius;

            // Draw outline then fill
            ctx.strokeText(char, 0, yPos);
            ctx.fillText(char, 0, yPos);

            ctx.restore();
        }
    };

    // Draw the top and bottom text arcs
    if (textTop && textTop.trim() !== '') {
        drawArchedText(textTop.toUpperCase(), true);
    }
    if (textBottom && textBottom.trim() !== '') {
        drawArchedText(textBottom.toUpperCase(), false);
    }

    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

Image Name Studio is a versatile online tool that allows users to customize images by adding creative text overlays. It is particularly useful for creating visually appealing titles or labels for images, such as movie or project titles. Users can specify the text for both the top and bottom of the image, choose a variety of font styles and colors, and adjust the arc and size of the text to fit their design needs. This tool can be used in various contexts, including graphic design, social media content creation, and promotional materials.

Leave a Reply

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