Please bookmark this page to avoid losing your image tool!

Image Phrase Overlay Tool

(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.
/**
 * Overlays a given phrase onto an image.
 * This function creates a canvas, draws the original image, and then adds text on top of it.
 * The text style, content, and position are customizable.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {string} [text='Ввремя для…ВиБокса!'] The phrase to overlay on the image.
 * @param {number} [fontSize=48] The font size of the text in pixels.
 * @param {string} [fontColor='#FFFFFF'] The color of the text fill (e.g., 'white', '#FFF').
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {number} [strokeWidth=2] The width of the text outline in pixels.
 * @param {string} [position='bottom-center'] The position of the text. Can be 'top-center', 'center', or 'bottom-center'.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text overlay.
 */
function processImage(originalImg, text = 'Ввремя для…ВиБокса!', fontSize = 48, fontColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 2, position = 'bottom-center') {
    // Create a new 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);

    // --- Text Styling ---
    // Use a bold, impactful font stack that supports Cyrillic characters
    ctx.font = `bold ${fontSize}px 'Impact', 'Arial Black', sans-serif`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Align text to the center horizontally
    ctx.textAlign = 'center';

    // --- Text Positioning ---
    const x = canvas.width / 2;
    let y;
    // Calculate a margin based on the font size to avoid placing text right at the edge
    const margin = fontSize * 0.5;

    switch (position.toLowerCase()) {
        case 'top-center':
            // Align based on the top of the text
            ctx.textBaseline = 'top';
            y = margin;
            break;
        case 'center':
            // Align based on the middle of the text
            ctx.textBaseline = 'middle';
            y = canvas.height / 2;
            break;
        case 'bottom-center':
        default:
            // Align based on the bottom of the text
            ctx.textBaseline = 'bottom';
            y = canvas.height - margin;
            break;
    }
    
    // --- Drawing the Text ---
    // Draw the outline first
    ctx.strokeText(text, x, y);
    // Then draw the fill on top of the outline
    ctx.fillText(text, x, y);

    // 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 Phrase Overlay Tool allows users to add customized text phrases onto images. This tool lets you overlay text with various styling options, including font size, color, outline, and position on the image. It’s perfect for creating personalized images for social media posts, memes, invitations, or promotional materials where you want to convey a message effectively. Whether for personal or business use, you can easily enhance your images with this versatile overlay feature.

Leave a Reply

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