Please bookmark this page to avoid losing your image tool!

Image Motivation Quote 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.
async function processImage(originalImg, quoteText = "Не хочу проигрывать!", textColor = "white", fontFamily = "Oswald", fontSizeRatio = 10, overlayDarkness = 0.4, borderRatio = 5, borderColor = "black") {
    /**
     * Dynamically loads a font to be used on the canvas.
     * @param {string} family The font-family name.
     * @param {string} url The URL to the font file.
     * @param {object} descriptors Font descriptors.
     * @returns {Promise<void>} A promise that resolves when the font is loaded.
     */
    const loadFont = async (family, url, descriptors) => {
        // Check if the font is already loaded to avoid re-fetching.
        if ([...document.fonts].some(f => f.family === family)) {
            return;
        }
        try {
            const font = new FontFace(family, `url(${url})`, descriptors);
            await font.load();
            document.fonts.add(font);
        } catch (error) {
            console.error(`Could not load font: ${family}`, error);
            // Propagate the error to allow the caller to handle fallbacks.
            throw error;
        }
    };

    // Use a bold, impactful font like Oswald. Load it dynamically.
    // If the user specifies another font, we'll try to use that directly.
    let effectiveFontFamily = fontFamily;
    if (fontFamily === "Oswald") {
        try {
            // Font file from Google Fonts CDN
            const fontUrl = 'https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2';
            await loadFont('Oswald', fontUrl, { weight: '700' });
        } catch (e) {
            // If Oswald fails to load, fall back to a web-safe font.
            console.warn("Falling back to Impact font.");
            effectiveFontFamily = 'Impact, sans-serif';
        }
    }

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Calculate dimensions including the border
    // Border size is relative to the smaller dimension of the image for a uniform look.
    const borderSize = (Math.min(imgWidth, imgHeight) * borderRatio) / 100;
    const canvasWidth = imgWidth + borderSize * 2;
    const canvasHeight = imgHeight + borderSize * 2;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Draw the border by filling the entire canvas with the border color
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Draw the original image centered on the canvas
    ctx.drawImage(originalImg, borderSize, borderSize, imgWidth, imgHeight);

    // Apply a darkening overlay to make the text more readable
    if (overlayDarkness > 0 && overlayDarkness <= 1) {
        ctx.fillStyle = `rgba(0, 0, 0, ${overlayDarkness})`;
        ctx.fillRect(borderSize, borderSize, imgWidth, imgHeight);
    }

    // Set up text properties
    const fontSize = (imgWidth * fontSizeRatio) / 100;
    ctx.font = `700 ${fontSize}px ${effectiveFontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.shadowBlur = 10;

    // Logic to wrap text if it's too long
    const textMaxWidth = imgWidth * 0.9; // Use 90% of image width for text
    const lineHeight = fontSize * 1.2;
    const words = quoteText.toUpperCase().split(' ');
    const lines = [];
    let currentLine = words[0];

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

    // Calculate the starting Y position to vertically center the text block
    const totalTextHeight = lines.length * lineHeight;
    const startY = (canvasHeight / 2) - (totalTextHeight / 2);

    // Draw each line of text
    lines.forEach((line, index) => {
        const y = startY + (index * lineHeight) + (lineHeight / 2);
        ctx.fillText(line, canvasWidth / 2, 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 Motivation Quote Generator allows users to upload an image and overlay it with custom motivational quotes. This tool enhances images by adding stylized text with adjustable font settings, colors, and borders to create inspiring visuals. Ideal for personal development, social media sharing, or creating unique posters, users can motivate themselves or others visually by combining meaningful quotes with imagery.

Leave a Reply

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