Image Quote Generator For Life Reflections

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;
}