Please bookmark this page to avoid losing your image tool!

Image Caption Generator For Children’s Expressions

(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.
/**
 * Adds a caption to an image, designed to look like a meme or a caption for a child's photo.
 * It automatically loads a playful Google Font that supports Cyrillic characters.
 *
 * @param {Image} originalImg - The original JavaScript Image object.
 * @param {string} captionText - The text of the caption to add.
 * @param {string} fontColor - The color of the text (e.g., '#FFFFFF').
 * @param {number} fontSize - The font size in pixels. This is a base size and will be scaled slightly based on image width.
 * @param {string} fontFamily - The font family to use. Must be a Google Font or a web-safe font.
 * @param {string} position - The vertical position of the caption. Can be 'top', 'bottom', or 'center'.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves with a canvas element containing the captioned image.
 */
async function processImage(
    originalImg,
    captionText = "Не хочу в садик!",
    fontColor = "#FFFFFF",
    fontSize = 48,
    fontFamily = "Caveat",
    position = "bottom"
) {
    // Dynamically load the Google Font ('Caveat' is playful and supports Cyrillic)
    try {
        const fontCheck = `1em ${fontFamily}`;
        if (!document.fonts.check(fontCheck)) {
            // Using the Google Fonts API URL for 'Caveat'
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}&display=swap`;
            const styleSheet = new CSSStyleSheet();
            const response = await fetch(fontUrl);
            const css = await response.text();
            styleSheet.replaceSync(css);
            document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
            await document.fonts.ready;
        }
    } catch (e) {
        console.error(`Font ${fontFamily} could not be loaded. Using a default font.`, e);
        fontFamily = 'sans-serif'; // Fallback font
    }

    // Create a canvas with the same dimensions as the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Set text styling properties
    const finalFontSize = Math.max(12, Math.round(fontSize * (canvas.width / 800))); // Scale font size relative to image width
    ctx.font = `${finalFontSize}px "${fontFamily}", sans-serif`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add a stroke (outline) for better readability on any background
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = Math.max(1, finalFontSize / 12);

    // --- Text Wrapping Logic ---
    const x = canvas.width / 2;
    const maxWidth = canvas.width * 0.9; // Use 90% of image width for text
    const lineHeight = finalFontSize * 1.2;
    const words = captionText.split(' ');
    let lines = [];
    let currentLine = words[0] || '';

    for (let i = 1; i < words.length; i++) {
        const word = words[i];
        const width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);

    // --- Vertical Positioning Logic ---
    const textBlockHeight = lines.length * lineHeight;
    const margin = Math.max(10, canvas.height * 0.05); // 5% vertical margin
    let startY;

    switch (position) {
        case 'top':
            // Position the text block at the top
            startY = margin + (lineHeight / 2);
            break;
        case 'center':
            // Center the entire block of text vertically
            startY = (canvas.height / 2) - (textBlockHeight / 2) + (lineHeight / 2);
            break;
        case 'bottom':
        default:
            // Position the text block at the bottom
            startY = canvas.height - margin - textBlockHeight + (lineHeight / 2);
            break;
    }

    // Draw each line of text onto the canvas
    for (let i = 0; i < lines.length; i++) {
        const lineY = startY + (i * lineHeight);
        // Draw the stroke first, then the fill
        ctx.strokeText(lines[i], x, lineY);
        ctx.fillText(lines[i], x, lineY);
    }

    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 Caption Generator for Children’s Expressions allows users to add playful captions to images, making them suitable for children’s photos or meme-like content. It supports customization of the text’s font, color, size, and vertical positioning, ensuring that captions enhance the visual appeal of images while remaining legible. This tool is ideal for parents looking to share fun moments, educators wanting to create engaging materials, or anyone interested in adding a creative touch to their images.

Leave a Reply

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