Video And Audio Metadata And Format Information Extractor Tool

async function processImage(originalImg, extractDetailedMetadata = "true") {
    // Create a container element to neatly display the metadata and format information
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    container.style.padding = '20px';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.boxSizing = 'border-box';
    container.style.backgroundColor = '#1e1e2f';
    container.style.color = '#f8f8f2';
    container.style.border = '1px solid #44475a';
    container.style.borderRadius = '8px';
    container.style.overflowX = 'auto';
    
    const header = document.createElement('h3');
    header.style.marginTop = '0';
    header.style.borderBottom = '1px solid #44475a';
    header.style.paddingBottom = '10px';
    header.style.color = '#bd93f9';
    header.textContent = 'Metadata & Format Information Extractor';
    container.appendChild(header);

    const table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    table.style.fontSize = '14px';
    table.style.textAlign = 'left';

    const addRow = (key, value) => {
        const tr = document.createElement('tr');
        const tdKey = document.createElement('th');
        tdKey.style.padding = '10px';
        tdKey.style.borderBottom = '1px solid #44475a';
        tdKey.style.width = '35%';
        tdKey.style.color = '#8be9fd';
        tdKey.textContent = key;
        
        const tdValue = document.createElement('td');
        tdValue.style.padding = '10px';
        tdValue.style.borderBottom = '1px solid #44475a';
        tdValue.style.wordBreak = 'break-word';
        tdValue.textContent = value;
        
        tr.appendChild(tdKey);
        tr.appendChild(tdValue);
        table.appendChild(tr);
    };

    // Load exifr for extracting deep image metadata if required
    let exifrLoaded = false;
    if (extractDetailedMetadata === "true") {
        if (typeof window.exifr === 'undefined') {
            try {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/exifr/dist/full.umd.js';
                    script.onload = () => { exifrLoaded = true; resolve(); };
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            } catch (err) {
                console.warn('Failed to load exifr dependency for metadata extraction.', err);
            }
        } else {
            exifrLoaded = true;
        }
    }

    // Attempt to figure out general format details
    addRow('Format Type', 'Image (Visual Media)');
    addRow('Natural Width', `${originalImg.naturalWidth} px`);
    addRow('Natural Height', `${originalImg.naturalHeight} px`);
    addRow('Aspect Ratio', `${(originalImg.naturalWidth / originalImg.naturalHeight).toFixed(4)}:1`);

    let srcLen = originalImg.src.length;
    if (originalImg.src.startsWith('data:image/')) {
        const mimeType = originalImg.src.substring(5, originalImg.src.indexOf(';'));
        addRow('MIME Type', mimeType);
        
        // Approximate Base64 size to bytes
        const base64Str = originalImg.src.split(',')[1];
        if (base64Str) {
            const sizeInBytes = Math.floor(base64Str.length * 0.75) 
                              - (base64Str.endsWith('==') ? 2 : (base64Str.endsWith('=') ? 1 : 0));
            addRow('Approx. File Size', `${(sizeInBytes / 1024).toFixed(2)} KB`);
        }
    }

    // Standardize URL to potentially get the file extension
    try {
        const urlObj = new URL(originalImg.src);
        const fileName = urlObj.pathname.split('/').pop() || 'Unknown';
        if (fileName && fileName !== 'Unknown') {
            addRow('Source File Name', fileName);
        }
    } catch {
        // Blob or data URI error is fine to swallow here
    }

    // Try extracting Exif, IPTC, and XMP metadata 
    if (exifrLoaded && typeof window.exifr !== 'undefined') {
        try {
            const parsedData = await window.exifr.parse(originalImg, {
                tiff: true,
                exif: true,
                gps: true,
                iptc: true,
                xmp: true
            });

            if (parsedData && Object.keys(parsedData).length > 0) {
                for (const [key, value] of Object.entries(parsedData)) {
                    // Stringify any arrays or objects
                    let displayValue = typeof value === 'object' ? JSON.stringify(value) : value;
                    addRow(`[File Meta] ${key}`, displayValue);
                }
            } else {
                addRow('Additional Metadata', 'No embedded metadata formats found or accessible.');
            }
        } catch (err) {
            addRow('Metadata Extraction Error', 'Image cross-origin restriction or unparseable metadata block.');
        }
    }

    container.appendChild(table);
    return container;
}