Please bookmark this page to avoid losing your image tool!

Image Quote Generator For Life Reflections

(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.
function processImage(originalImg, quoteText = "The journey of a thousand miles begins with a single step.", authorText = "- Lao Tzu", fontFamily = "Impact, sans-serif", quoteSizeRatio = 12, authorSizeRatio = 30, fontColor = "#FFFFFF", overlayColor = "rgba(0, 0, 0, 0.4)", textPosition = "center") {

    // 1. Create a canvas and set its dimensions to match the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const {
        width,
        height
    } = canvas;

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

    // 3. Draw a semi-transparent overlay to enhance text readability.
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, width, height);

    // 4. Define text properties based on input parameters and image size.
    const quoteFontSize = Math.floor(width / quoteSizeRatio);
    const authorFontSize = Math.floor(width / authorSizeRatio);
    const sidePadding = width * 0.1; // 10% padding on each side
    const maxWidth = width - (sidePadding * 2);
    const x = width / 2; // Center horizontally
    const quoteLineHeight = quoteFontSize * 1.1;

    /**
     * Helper function to wrap text into multiple lines if it exceeds the maximum width.
     * @param {string} text - The text to wrap.
     * @param {number} aMaxWidth - The maximum width for a line.
     * @param {string} font - The CSS font string.
     * @returns {string[]} An array of strings, where each string is a line of text.
     */
    const getLines = (text, aMaxWidth, font) => {
        ctx.font = font;
        const words = text.split(' ');
        const lines = [];
        let currentLine = '';

        for (const word of words) {
            // If currentLine is empty, the test line is just the word, otherwise add a space.
            const testLine = currentLine === '' ? word : `${currentLine} ${word}`;
            const metrics = ctx.measureText(testLine);
            if (metrics.width > aMaxWidth && currentLine !== '') {
                lines.push(currentLine);
                currentLine = word;
            } else {
                currentLine = testLine;
            }
        }
        lines.push(currentLine);
        return lines;
    };

    // 5. Get the wrapped lines for both the quote and the author text.
    const quoteLines = getLines(quoteText.toUpperCase(), maxWidth, `bold ${quoteFontSize}px ${fontFamily}`);
    const authorLines = getLines(authorText, maxWidth, `${authorFontSize}px ${fontFamily}`);

    // 6. Calculate the total height of the text block to position it correctly.
    const quoteBlockHeight = quoteLines.length * quoteLineHeight;
    const authorBlockHeight = authorLines.length * (authorFontSize * 1.2);
    const spaceBetween = quoteFontSize * 0.5; // Space between quote and author
    const totalTextBlockHeight = quoteBlockHeight + spaceBetween + authorBlockHeight;

    // 7. Determine the starting Y position based on the 'textPosition' parameter.
    let currentY;
    const verticalPadding = height * 0.1; // 10% padding on top/bottom

    switch (textPosition) {
        case 'top':
            currentY = verticalPadding;
            break;
        case 'bottom':
            currentY = height - totalTextBlockHeight - verticalPadding;
            break;
        case 'center':
        default:
            currentY = (height - totalTextBlockHeight) / 2;
            break;
    }

    // 8. Style and draw the text onto the canvas.
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Add a subtle shadow for better contrast and a classic look.
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.shadowBlur = 6;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Draw the quote lines.
    ctx.font = `bold ${quoteFontSize}px ${fontFamily}`;
    for (const line of quoteLines) {
        ctx.fillText(line, x, currentY);
        currentY += quoteLineHeight;
    }

    // Add space and draw the author lines.
    currentY += spaceBetween;
    ctx.font = `${authorFontSize}px ${fontFamily}`;
    for (const line of authorLines) {
        ctx.fillText(line, x, currentY);
        currentY += authorFontSize * 1.2;
    }

    // 9. 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 Quote Generator for Life Reflections allows users to create visually appealing images featuring inspirational quotes. By uploading an image, users can overlay a selected quote and its author, adjusting the text’s font, size, color, and position on the image. This tool is ideal for creating motivational posts for social media, custom wallpapers, or personal reminders that combine imagery and thoughtful quotes, enhancing both the aesthetic and emotional impact of the visuals.

Leave a Reply

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