Please bookmark this page to avoid losing your image tool!

Image Showcasing Союзмультфильм’s Past Programs

(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, topText = "Союзмультфильм представляет", bottomText = "Программу прошлых лет", textColor = "#fdfcdd", backgroundColor = "#2a4d85") {
    const fontName = 'Ruslan Display';
    const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}&display=swap`;

    // Ensure the font is loaded before using it
    try {
        if (!document.querySelector(`link[href="${fontUrl}"]`)) {
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
            // Wait for the font to be loaded and ready to use
            await document.fonts.load(`1em "${fontName}"`);
        } else {
            // If the link tag is already there, still wait for the font to be ready for the current session.
            await document.fonts.load(`1em "${fontName}"`).catch(err => console.warn("Font may not have loaded correctly:", err));
        }
    } catch (e) {
        console.error("Failed to load Google Font:", e);
        // Fallback to a generic serif font if loading fails.
        ctx.font = `${fontSize}px serif`;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Define layout parameters relative to the image size for better scaling
    const padding = Math.max(20, Math.floor(originalImg.width * 0.08));
    const fontSize = Math.max(24, Math.floor(originalImg.width / 18));
    const textImageSpacing = Math.floor(fontSize * 0.8);

    // Calculate canvas dimensions
    canvas.width = originalImg.width + padding * 2;
    canvas.height = padding * 2 + fontSize * 2 + textImageSpacing * 2 + originalImg.height;

    // --- Start drawing ---

    // 1. Draw the background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Set up text style
    ctx.fillStyle = textColor;
    ctx.font = `${fontSize}px "${fontName}"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // 3. Draw the top text
    const topTextY = padding;
    ctx.fillText(topText, canvas.width / 2, topTextY);

    // 4. Draw the image
    const imageY = topTextY + fontSize + textImageSpacing;
    ctx.drawImage(originalImg, padding, imageY, originalImg.width, originalImg.height);

    // 5. Draw the bottom text
    const bottomTextY = imageY + originalImg.height + textImageSpacing;
    ctx.fillText(bottomText, canvas.width / 2, bottomTextY);

    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 Showcasing Союзмультфильм’s Past Programs’ tool allows users to seamlessly add decorative text to their images. With customizable top and bottom text, users can highlight specific information while maintaining an aesthetically pleasing design. This tool is ideal for creating promotional materials, social media posts, or presentations that showcase past programs or themes associated with Союзмультфильм. The user-friendly interface ensures that the final images are well-structured and visually appealing, incorporating personalized text and background colors.

Leave a Reply

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