Image Bulk Date And Coordinate Stamper

function processImage(originalImg, dateString = new Date().toLocaleString(), coordinates = '', roadName = '') {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set the canvas dimensions to match the original image.
    // Use naturalWidth/Height to get the intrinsic size of the image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Build the text string to be stamped from the function parameters.
    const parts = [];

    // Add date string if provided and not empty.
    if (dateString && typeof dateString === 'string' && dateString.trim() !== '') {
        parts.push(dateString.trim());
    }

    // Parse the 'coordinates' string (e.g., "40.7128, -74.0060") and add it.
    if (coordinates && typeof coordinates === 'string') {
        const coords = coordinates.split(',').map(c => parseFloat(c.trim()));
        if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {
            const lat = coords[0];
            const lon = coords[1];
            parts.push(`Lat: ${lat.toFixed(6)}, Lon: ${lon.toFixed(6)}`);
        }
    }

    // Add road name if provided and not empty.
    if (roadName && typeof roadName === 'string' && roadName.trim() !== '') {
        parts.push(roadName.trim());
    }

    const stampText = parts.join(' | ');

    // If there is no text to stamp, return the canvas with just the original image.
    if (!stampText) {
        return canvas;
    }

    // 5. Define styling for the stamp.
    // Use a common web-safe font. Making it bold improves readability.
    const font = 'Arial, sans-serif';
    // Set font size relative to the image height for scalability, with a minimum size of 14px.
    const fontSize = Math.max(14, Math.round(canvas.height / 35));
    ctx.font = `bold ${fontSize}px ${font}`;
    
    // Define a margin for the stamp from the image's edge based on font size.
    const margin = Math.round(fontSize * 0.5);

    // 6. Set text alignment for easy positioning in the bottom-right corner.
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    
    // 7. Calculate positions and dimensions for the text and its background.
    const textX = canvas.width - margin;
    const textY = canvas.height - margin;
    
    // Get text metrics to calculate background size accurately.
    const textMetrics = ctx.measureText(stampText);
    const textWidth = textMetrics.width;
    // Using font bounding box provides a more accurate height for the background rectangle.
    const textHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;

    // Background rectangle dimensions and position.
    const rectWidth = textWidth + (margin * 2);
    const rectHeight = textHeight + (margin * 2);
    const rectX = textX - textWidth - margin;
    const rectY = textY - textHeight - margin;

    // 8. Draw the semi-transparent background for readability against any image content.
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
    
    // 9. Draw the white text on top of the background.
    ctx.fillStyle = 'white';
    ctx.fillText(stampText, textX, textY);
    
    // 10. Return the modified canvas element.
    return canvas;
}