Please bookmark this page to avoid losing your image tool!

Image Alphabet 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.
/**
 * Creates text where the characters are filled with a provided image texture.
 * This function interprets "Image Alphabet Generator" as a tool to generate text
 * (an "alphabet") using an image as the fill pattern.
 *
 * @param {Image} originalImg The input Image object, which should be fully loaded.
 * @param {string} [text='IMAGE TEXT'] The text to generate.
 * @param {number} [fontSize=150] The size of the font in pixels.
 * @param {string} [fontFamily='Anton'] The font family for the text. Recommends bold/heavy fonts. It will try to load this from Google Fonts. Supports web-safe fonts too.
 * @param {string} [backgroundColor='transparent'] The background color for the canvas. Use CSS color strings like '#FFFFFF' or 'transparent'.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves with a canvas element containing the generated image text.
 */
async function processImage(originalImg, text = 'IMAGE TEXT', fontSize = 150, fontFamily = 'Anton', backgroundColor = 'transparent') {
    // 1. Sanitize input parameters
    fontSize = Math.max(1, Number(fontSize)) || 150;
    text = String(text).trim();

    // 2. Dynamically load the font from Google Fonts if it's not a standard web-safe font.
    // We check if the font is loaded to avoid redundant loads.
    const fontToLoad = fontFamily;
    try {
        if (!document.fonts.check(`${fontSize}px ${fontToLoad}`)) {
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontToLoad.replace(/ /g, '+')}&display=swap`;
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';

            // Wait for the stylesheet to load
            await new Promise((resolve, reject) => {
                link.onload = resolve;
                link.onerror = reject;
                document.head.appendChild(link);
            });

            // Wait for the font to be ready for use
            await document.fonts.load(`${fontSize}px ${fontToLoad}`);
        }
    } catch (error) {
        console.error(`Could not load Google Font "${fontToLoad}". Falling back to a web-safe font.`, error);
        fontFamily = 'Impact'; // A good, bold, web-safe fallback
    }

    const fontString = `${fontSize}px "${fontFamily}", Impact, sans-serif`;

    // 3. Measure text dimensions using a temporary canvas
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.font = fontString;

    if (!text) {
        // Return a small, empty canvas if there's no text
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    const metrics = tempCtx.measureText(text);
    const textWidth = metrics.width;
    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

    // Add a small buffer to prevent clipping issues in some browsers
    const canvasWidth = Math.ceil(textWidth) + 2;
    const canvasHeight = Math.ceil(textHeight) + 2;

    // 4. Create the final output canvas
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 5. Fill the background if a color is specified
    if (backgroundColor && backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 6. Create a pattern from the original image
    const pattern = ctx.createPattern(originalImg, 'repeat');
    if (!pattern) {
        console.error("Failed to create pattern. The image might not be fully loaded or is invalid.");
        ctx.fillStyle = 'red';
        ctx.font = '20px Arial';
        ctx.fillText('Image Error', 10, 30);
        return canvas;
    }

    // 7. Configure context and draw the text filled with the image pattern
    ctx.fillStyle = pattern;
    ctx.font = fontString;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';

    // The y-coordinate for fillText specifies the baseline. To position the
    // very top of the text at the top of our canvas (plus a 1px buffer),
    // we need to set the baseline's y-position to the height of the text above the baseline.
    const yPos = metrics.actualBoundingBoxAscent + 1;
    ctx.fillText(text, 1, yPos);

    // 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 Alphabet Generator is a creative online tool that allows users to generate text filled with a custom image texture. By inputting a desired text string, users can specify the font size, font family, and background color, while the tool uses the provided image to fill the characters of the text. This can be particularly useful for graphic design projects, creating personalized artwork, or enhancing social media graphics. The generated output is an HTML canvas element that displays the styled text, making it easy to integrate into web applications or save for further use.

Leave a Reply

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