Image Address Text Tool

/**
 * Adds address text as an overlay onto an image.
 *
 * @param {HTMLImageElement} originalImg - The original image object.
 * @param {string} [addressText='123 Example Street\nCity, Country'] - The text to display. Use '\n' for line breaks.
 * @param {string} [position='bottom-right'] - The position of the text. Options: 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'.
 * @param {number} [fontSize=30] - The font size of the text in pixels.
 * @param {string} [fontColor='#FFFFFF'] - The color of the text (e.g., 'white', '#FF0000').
 * @param {string} [fontFamily='Arial'] - The font family for the text.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.5)'] - The background color of the text box. Use 'transparent' for no background.
 * @param {number} [padding=10] - The padding inside the text background box in pixels.
 * @param {number} [margin=20] - The margin from the image edges in pixels.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(originalImg, addressText = '123 Example Street\nCity, Country', position = 'bottom-right', fontSize = 30, fontColor = '#FFFFFF', fontFamily = 'Arial', backgroundColor = 'rgba(0, 0, 0, 0.5)', padding = 10, margin = 20) {
    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // 4. Set up font properties
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.textBaseline = 'top';

    // 5. Handle multi-line text and measure dimensions
    const lines = addressText.split('\n');
    const lineHeight = fontSize * 1.2; // Add some extra space between lines

    let maxWidth = 0;
    lines.forEach(line => {
        const lineWidth = ctx.measureText(line).width;
        if (lineWidth > maxWidth) {
            maxWidth = lineWidth;
        }
    });

    const textBlockHeight = (lines.length * lineHeight) - (lineHeight - fontSize); // Total height of the text block

    // Calculate background box dimensions
    const boxWidth = maxWidth + (padding * 2);
    const boxHeight = textBlockHeight + (padding * 2);

    // 6. Calculate coordinates for the text box based on the 'position' parameter
    let boxX, boxY;

    // Horizontal positioning
    if (position.includes('right')) {
        boxX = w - boxWidth - margin;
    } else if (position.includes('left')) {
        boxX = margin;
    } else { // 'center'
        boxX = (w - boxWidth) / 2;
    }

    // Vertical positioning
    if (position.includes('bottom')) {
        boxY = h - boxHeight - margin;
    } else if (position.includes('top')) {
        boxY = margin;
    } else { // 'center'
        boxY = (h - boxHeight) / 2;
    }

    // 7. Draw the background rectangle if a color is provided
    if (backgroundColor && backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    }

    // 8. Draw each line of text
    ctx.fillStyle = fontColor;
    const textStartX = boxX + padding;
    let textStartY = boxY + padding;

    lines.forEach(line => {
        ctx.fillText(line, textStartX, textStartY);
        textStartY += lineHeight;
    });

    // 9. Return the resulting canvas
    return canvas;
}