Please bookmark this page to avoid losing your image tool!

Image Text Action 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.
/**
 * Adds customizable text over an image.
 * This function draws the original image onto a canvas and then overlays it with the specified text.
 * It supports web-safe fonts and can dynamically load fonts from Google Fonts.
 *
 * @param {Image} originalImg The original HTML Image object.
 * @param {string} text The text content to write on the image.
 * @param {number} fontSize The font size in pixels.
 * @param {string} fontFamily The font family (e.g., 'Arial', 'Roboto'). Assumes Google Fonts for non-web-safe names.
 * @param {string} fontColor A CSS color string for the text fill (e.g., '#FFFFFF', 'rgba(255, 0, 0, 0.5)').
 * @param {string} shadowColor A CSS color string for the text shadow/outline.
 * @param {number} shadowBlur The blur radius for the text shadow, creating a soft outline effect.
 * @param {number} positionX The horizontal position of the text's anchor point as a percentage of the image width (0-100).
 * @param {number} positionY The vertical position of the text's anchor point as a percentage of the image height (0-100).
 * @param {string} textAlign The horizontal alignment of the text ('left', 'center', 'right').
 * @param {string} textBaseline The vertical alignment of the text ('top', 'middle', 'bottom').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element with the image and text.
 */
async function processImage(
    originalImg,
    text = 'Sample Text',
    fontSize = 48,
    fontFamily = 'Impact',
    fontColor = '#FFFFFF',
    shadowColor = '#000000',
    shadowBlur = 5,
    positionX = 50,
    positionY = 50,
    textAlign = 'center',
    textBaseline = 'middle'
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // A list of common web-safe fonts to avoid unnecessary network requests.
    const webSafeFonts = [
        'arial', 'verdana', 'helvetica', 'tahoma', 'trebuchet ms', 
        'times new roman', 'georgia', 'garamond', 'courier new', 'brush script mt', 'impact'
    ];

    // If the font is not a common web-safe one, assume it's a Google Font and load it.
    if (!webSafeFonts.includes(fontFamily.toLowerCase())) {
        try {
            const fontUrlName = fontFamily.replace(/\s/g, '+');
            const fontId = `font-link-${fontUrlName}`;
            if (!document.getElementById(fontId)) {
                const link = document.createElement('link');
                link.id = fontId;
                link.rel = 'stylesheet';
                link.href = `https://fonts.googleapis.com/css2?family=${fontUrlName}&display=swap`;
                document.head.appendChild(link);
            }
            // Wait until the browser has loaded the font.
            await document.fonts.load(`${fontSize}px "${fontFamily}"`);
        } catch (e) {
            console.warn(`Could not load font "${fontFamily}" from Google Fonts. The browser will use a fallback font.`, e);
        }
    }

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

    // Set text style properties
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // Apply a shadow/outline for better readability
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = shadowBlur > 0 ? shadowBlur : 0;

    // Calculate the pixel position from the percentage values
    const x = (canvas.width * positionX) / 100;
    const y = (canvas.height * positionY) / 100;

    // Draw the text on the canvas
    ctx.fillText(text, x, y);

    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 Action Tool allows users to add customizable text overlays onto images. With this tool, you can easily personalize images by specifying the text, font properties, colors, shadow effects, and positioning. This is ideal for creating engaging social media graphics, custom memes, promotional materials, or personal projects such as greeting cards. The tool supports a variety of fonts, including both web-safe fonts and Google Fonts, ensuring versatility in design.

Leave a Reply

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