Please bookmark this page to avoid losing your image tool!

Image Verb Title Generator

(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, verb = 'Exploring', noun = 'The World', font = 'Anton', fontSize = 12, textColor = '#FFFFFF', position = 'center') {
    /**
     * 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.
     */
    const loadFont = async (fontName) => {
        const fontId = `google-font-${fontName.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font stylesheet is already added, assume it's loaded or loading.
            return;
        }

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

        // Wait for the font to be ready to use
        await document.fonts.load(`1em ${fontName}`);
    };

    // 1. Ensure the specified font is loaded and ready.
    try {
        await loadFont(font);
    } catch (e) {
        console.error("Font could not be loaded. Using a fallback font.", e);
        font = 'Arial'; // Use a web-safe fallback font
    }


    // 2. Create a canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // 5. Prepare the text and styling.
    const textLine1 = verb.toUpperCase();
    const textLine2 = `THE ${noun.toUpperCase()}`;
    const calculatedFontSize = canvas.height * (fontSize / 100);

    ctx.font = `bold ${calculatedFontSize}px ${font}, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Add a shadow for better readability on various image backgrounds.
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = calculatedFontSize * 0.1;
    ctx.shadowOffsetX = calculatedFontSize * 0.05;
    ctx.shadowOffsetY = calculatedFontSize * 0.05;

    // 6. Calculate text position.
    const x = canvas.width / 2;
    let y1, y2;

    const lineSpacing = calculatedFontSize * 0.15;
    const padding = calculatedFontSize * 0.5;

    switch (position) {
        case 'top':
            y1 = padding;
            y2 = y1 + calculatedFontSize + lineSpacing;
            break;
        case 'bottom':
            // Calculate from the bottom up to position the entire text block.
            const bottomEdge = canvas.height - padding;
            const totalTextHeight = calculatedFontSize * 2 + lineSpacing;
            y1 = bottomEdge - totalTextHeight;
            y2 = y1 + calculatedFontSize + lineSpacing;
            break;
        case 'center':
        default:
            // Center the gap between the two lines of text at the canvas's vertical midpoint.
            const verticalCenter = canvas.height / 2;
            y1 = verticalCenter - lineSpacing / 2 - calculatedFontSize;
            y2 = verticalCenter + lineSpacing / 2;
            break;
    }

    // 7. Draw the text onto the canvas.
    ctx.fillText(textLine1, x, y1);
    ctx.fillText(textLine2, x, y2);

    // 8. Return the final 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 Verb Title Generator is an online tool designed to create visually appealing images by overlaying customized text onto them. Users can specify a verb and a noun, along with various styling options such as font, font size, text color, and position. This tool is particularly useful for creating content for social media posts, graphic designs, or marketing materials where dynamic text enhances the visual impact of the image. Whether you want to add inspirational captions, event titles, or creative expressions, this tool enables you to personalize images quickly and effectively.

Leave a Reply

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