Image Location Marker For Street Photos

async function processImage(originalImg, streetName = 'Пушкина', houseNumber = '10', position = 'bottom-right', backgroundColor = '#003366', textColor = '#FFFFFF') {
    /**
     * Dynamically loads the 'Roboto' font (regular and bold weights) from Google Fonts if it's not already available in the document.
     * This ensures the text renders with the intended typeface.
     */
    if (!document.fonts.check('16px Roboto')) {
        try {
            const font400 = new FontFace('Roboto', 'url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2)', {
                weight: '400',
                style: 'normal'
            });
            const font700 = new FontFace('Roboto', 'url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2)', {
                weight: '700',
                style: 'normal'
            });
            // Await for both font weights to be loaded before proceeding.
            await Promise.all([font400.load(), font700.load()]);
            document.fonts.add(font400);
            document.fonts.add(font700);
        } catch (e) {
            console.error("Roboto font could not be loaded. Using system default sans-serif.", e);
        }
    }

    // Create a canvas with the same dimensions as the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // --- Marker Style and Dimension Calculations ---

    // Define styling properties, making them responsive to the image size for a balanced look.
    const basePadding = Math.max(15, canvas.width * 0.015);
    const streetFontSize = Math.max(16, canvas.width * 0.02);
    const numberFontSize = streetFontSize * 1.5; // House number is typically larger.
    const cornerRadius = 8;
    const vPadding = basePadding * 0.5;

    // Prepare the text content, adding the "ул." (street) abbreviation common in such signs.
    const text1 = `ул. ${streetName}`;
    const text2 = `${houseNumber}`;

    // Measure text widths using the specified fonts to determine the required marker width.
    ctx.font = `400 ${streetFontSize}px Roboto, sans-serif`;
    const metrics1 = ctx.measureText(text1);
    ctx.font = `700 ${numberFontSize}px Roboto, sans-serif`;
    const metrics2 = ctx.measureText(text2);

    const markerWidth = Math.max(metrics1.width, metrics2.width) + (basePadding * 2);
    // Calculate marker height based on font sizes and vertical padding.
    const markerHeight = streetFontSize + numberFontSize + 3 * vPadding;

    // --- Marker Position Calculation ---

    const margin = Math.max(20, canvas.width * 0.02); // Margin from the image edge.
    let markerX, markerY;

    switch (position) {
        case 'top-left':
            markerX = margin;
            markerY = margin;
            break;
        case 'top-right':
            markerX = canvas.width - markerWidth - margin;
            markerY = margin;
            break;
        case 'bottom-left':
            markerX = margin;
            markerY = canvas.height - markerHeight - margin;
            break;
        case 'bottom-right':
        default:
            markerX = canvas.width - markerWidth - margin;
            markerY = canvas.height - markerHeight - margin;
            break;
    }

    // --- Drawing Operations ---

    // 1. Draw the marker's background rectangle.
    ctx.fillStyle = backgroundColor;
    ctx.beginPath();
    // Use the modern ctx.roundRect if available for pleasant rounded corners, with a fallback to a sharp rectangle.
    if (ctx.roundRect) {
        ctx.roundRect(markerX, markerY, markerWidth, markerHeight, cornerRadius);
    } else {
        ctx.rect(markerX, markerY, markerWidth, markerHeight);
    }
    ctx.fill();

    // 2. Draw the text content, centered inside the marker.
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Draw the street name line.
    ctx.font = `400 ${streetFontSize}px Roboto, sans-serif`;
    const text1Y = markerY + vPadding;
    ctx.fillText(text1, markerX + markerWidth / 2, text1Y);

    // Draw the house number line.
    ctx.font = `700 ${numberFontSize}px Roboto, sans-serif`;
    const text2Y = markerY + vPadding + streetFontSize + vPadding;
    ctx.fillText(text2, markerX + markerWidth / 2, text2Y);

    // Return the final canvas element, which now contains the image with the overlay.
    return canvas;
}