Photo Address Labeling Tool

function processImage(
    originalImg,
    addressText = 'ул. Ленина, д. 1',
    fontSize = 24,
    fontColor = '#FFFFFF',
    fontFamily = 'Arial',
    backgroundColor = 'rgba(0, 84, 165, 0.8)',
    position = 'bottom-left',
    padding = 10
) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image object is loaded before proceeding
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Set up text properties for measuring
    const font = `${fontSize}px ${fontFamily}`;
    ctx.font = font;
    ctx.textBaseline = 'top';

    // Measure the text to determine the required size for the label
    const textMetrics = ctx.measureText(addressText);
    const textWidth = textMetrics.width;
    // Get an accurate text height using font metrics, with a fallback to the font size
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent || fontSize;

    // Calculate the total dimensions of the label including padding
    const labelWidth = textWidth + (padding * 2);
    const labelHeight = textHeight + (padding * 2);

    // Determine the top-left (x, y) coordinates for the label based on the position parameter
    let x, y;

    switch (position) {
        case 'top-left':
            x = padding;
            y = padding;
            break;
        case 'top-right':
            x = canvas.width - labelWidth - padding;
            y = padding;
            break;
        case 'bottom-right':
            x = canvas.width - labelWidth - padding;
            y = canvas.height - labelHeight - padding;
            break;
        case 'center':
            x = (canvas.width - labelWidth) / 2;
            y = (canvas.height - labelHeight) / 2;
            break;
        case 'bottom-left':
        default:
            x = padding;
            y = canvas.height - labelHeight - padding;
            break;
    }

    // Draw the semi-transparent background for the label
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(x, y, labelWidth, labelHeight);

    // Set the text color and draw the address text
    ctx.fillStyle = fontColor;
    ctx.fillText(addressText, x + padding, y + padding);

    // Return the final canvas element
    return canvas;
}