Please bookmark this page to avoid losing your image tool!

Image Text And Emoji Styler

(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, textAndEmojis = 'Татьяна от😺🎇🎼', font = 'Pacifico', fontSize = 80, textColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 5) {
    /**
     * Dynamically loads a font from Google Fonts if it's not a standard web-safe font.
     * Caches loaded fonts to avoid redundant network requests.
     * @param {string} fontName - The name of the font to load.
     */
    const loadFontIfNeeded = async (fontName) => {
        // A simple set to track loaded fonts to avoid re-adding link tags and awaiting repeatedly.
        if (!window.loadedFonts) {
            window.loadedFonts = new Set();
        }

        const webSafeFonts = new Set([
            'Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'Courier New', 'Georgia', 'serif', 'sans-serif', 'monospace'
        ]);

        if (!webSafeFonts.has(fontName) && !window.loadedFonts.has(fontName)) {
            const fontUrlName = fontName.split(' ').join('+');
            const link = document.createElement('link');
            link.href = `https://fonts.googleapis.com/css2?family=${fontUrlName}&display=swap`;
            link.rel = 'stylesheet';
            document.head.appendChild(link);

            try {
                // Wait for the font to be ready for use.
                await document.fonts.load(`1em "${fontName}"`);
                window.loadedFonts.add(fontName);
            } catch (e) {
                console.error(`Could not load font: ${fontName}`, e);
                // Fallback to a web-safe font if loading fails.
                font = 'Arial';
            }
        }
    };

    // Wait for the custom font to load before proceeding.
    await loadFontIfNeeded(font);

    // Create a canvas element.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Text Styling and Drawing ---
    
    // Set initial font style to measure the text.
    ctx.font = `${fontSize}px "${font}"`;

    // Automatically adjust font size if the text is wider than 90% of the image.
    const maxWidth = canvas.width * 0.9;
    let textMetrics = ctx.measureText(textAndEmojis);
    let adjustedFontSize = fontSize;

    if (textMetrics.width > maxWidth) {
        adjustedFontSize = Math.floor(fontSize * (maxWidth / textMetrics.width));
    }
    
    // Apply the final, potentially adjusted, font size.
    ctx.font = `${adjustedFontSize}px "${font}"`;

    // Set text alignment and style properties.
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Center the text horizontally and vertically.
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // Draw the text outline first for a crisp "sticker" effect.
    if (strokeWidth > 0) {
      ctx.strokeText(textAndEmojis, x, y);
    }
    
    // Draw the filled text on top of the outline.
    ctx.fillText(textAndEmojis, x, y);

    // Return the completed canvas element.
    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 Text and Emoji Styler tool allows users to enhance images by adding customizable text and emoji overlays. With options for different fonts, sizes, colors, and stroke effects, this tool is ideal for creating personalized graphics, social media posts, invitations, or any visual content that requires a unique touch. Users can upload their images, apply stylized text and emojis, and download the modified images, making it a versatile solution for graphic design needs.

Leave a Reply

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