Photo Metadata Latitude Longitude And Title Stamper

async function processImage(originalImg, textColor = "#FFFFFF", bgColor = "rgba(0, 0, 0, 0.7)", stampPosition = "bottom") {
    // Dynamically import exif-js for metadata extraction
    if (!window.EXIF) {
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/exif-js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    let metaTitle = "Title Metadata Not Found";
    let latStr = "Latitude Metadata Not Found";
    let lonStr = "Longitude Metadata Not Found";

    // Extract EXIF data from the image
    await new Promise(resolve => {
        EXIF.getData(originalImg, function() {
            const title = EXIF.getTag(this, "ImageDescription") || 
                          EXIF.getTag(this, "UserComment") || 
                          EXIF.getTag(this, "DocumentName");
            
            if (title) {
                metaTitle = String(title).trim();
            }

            const lat = EXIF.getTag(this, "GPSLatitude");
            const latRef = EXIF.getTag(this, "GPSLatitudeRef");
            const lon = EXIF.getTag(this, "GPSLongitude");
            const lonRef = EXIF.getTag(this, "GPSLongitudeRef");

            const formatCoord = (coord, ref) => {
                try {
                    if (!coord || coord.length < 3) return null;
                    const d = coord[0].valueOf();
                    const m = coord[1].valueOf();
                    const s = coord[2].valueOf();
                    return `${d}° ${m}' ${s.toFixed(2)}" ${ref || ''}`.trim();
                } catch (e) {
                    return null;
                }
            };

            const extractedLat = formatCoord(lat, latRef);
            const extractedLon = formatCoord(lon, lonRef);

            if (extractedLat) latStr = extractedLat;
            if (extractedLon) lonStr = extractedLon;

            resolve();
        });
    });

    // Setup canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

    // Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // Responsive font size based on the image size
    const fontSize = Math.max(14, Math.floor(canvas.width * 0.025));
    const padding = fontSize;
    const lineHeight = fontSize * 1.6;
    const textLines = [
        `Title: ${metaTitle}`,
        `Lat: ${latStr}`,
        `Lon: ${lonStr}`
    ];

    const stampHeight = (textLines.length * lineHeight) + padding;
    
    // Determine Y position for the stamp containing box
    let boxY = 0;
    if (stampPosition.toLowerCase() === "bottom") {
        boxY = canvas.height - stampHeight;
    }

    // Draw the background box for stamped text
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, boxY, canvas.width, stampHeight);

    // Draw the stamped text
    ctx.fillStyle = textColor;
    ctx.font = `${fontSize}px Arial, sans-serif`;
    ctx.textBaseline = "top";

    // Text shadow for improved readability
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

    let currentY = boxY + (padding / 2);
    
    for(let line of textLines) {
        // Truncate excessively long strings so they fit on standard screens
        const maxChars = Math.floor((canvas.width - (padding * 2)) / (fontSize * 0.6));
        if (line.length > maxChars && maxChars > 5) {
            line = line.substring(0, maxChars - 3) + "...";
        }

        ctx.fillText(line, padding, currentY);
        currentY += lineHeight;
    }

    return canvas;
}