Image About Information Tool

async function processImage(originalImg) {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, Helvetica, sans-serif';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.background = '#ffffff';
    container.style.color = '#333333';
    container.style.borderRadius = '8px';
    container.style.border = '1px solid #e2e8f0';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
    container.style.maxWidth = '100%';
    container.style.overflowX = 'auto';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Image About Information';
    title.style.marginTop = '0';
    title.style.marginBottom = '20px';
    title.style.color = '#1a202c';
    container.appendChild(title);

    // Calculate dimensions and basic stats
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    const info = {
        'Source (URL or Data)': originalImg.src.length > 100 ? originalImg.src.substring(0, 100) + '...' : originalImg.src,
        'Dimensions': `${width} x ${height} px`,
        'Aspect Ratio': (width / height).toFixed(4),
        'Megapixels': ((width * height) / 1000000).toFixed(2) + ' MP'
    };

    if (originalImg.alt) {
        info['Alt Text'] = originalImg.alt;
    }

    // Try to get file size
    try {
        if (originalImg.src.startsWith('data:')) {
            const base64str = originalImg.src.split(',')[1];
            if (base64str) {
                const bytes = atob(base64str).length;
                info['File Size'] = (bytes / 1024).toFixed(2) + ' KB';
            }
        } else {
            const res = await fetch(originalImg.src, { method: 'HEAD' });
            const size = res.headers.get('content-length');
            if (size) {
                info['File Size'] = (parseInt(size, 10) / 1024).toFixed(2) + ' KB';
                info['Content Type'] = res.headers.get('content-type') || 'Unknown';
            }
        }
    } catch (e) {
        // Fallback silently if fetch fails (e.g. CORS issues)
    }

    // Try getting EXIF data using dynamic import of exifr (lightweight EXIF parser)
    let exifData = null;
    try {
        const exifrModule = await import('https://cdn.jsdelivr.net/npm/exifr/dist/lite.esm.mjs');
        const exifr = exifrModule.default || exifrModule;
        exifData = await exifr.parse(originalImg.src);
    } catch (err) {
        console.warn('EXIF extraction skipped or failed:', err);
    }

    // Helper to build a table element for the data
    const createTable = (data, titleText) => {
        if (!data || typeof data !== 'object' || Object.keys(data).length === 0) return null;

        const wrapper = document.createElement('div');
        wrapper.style.marginBottom = '20px';

        if (titleText) {
            const head = document.createElement('h3');
            head.textContent = titleText;
            head.style.borderBottom = '2px solid #edf2f7';
            head.style.paddingBottom = '8px';
            head.style.marginBottom = '12px';
            head.style.color = '#2d3748';
            head.style.fontSize = '1.1em';
            wrapper.appendChild(head);
        }

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

        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                let value = data[key];
                
                // Format objects / arrays properly
                if (typeof value === 'object' && value !== null) {
                    if (value instanceof Uint8Array || Array.isArray(value)) {
                        value = `[Array (${value.length} items)]`;
                    } else {
                        value = JSON.stringify(value);
                    }
                }
                
                // Clean up undefined/null
                if (value === null || value === undefined) {
                    continue;
                }

                const row = document.createElement('tr');
                
                const th = document.createElement('th');
                th.textContent = key;
                th.style.textAlign = 'left';
                th.style.padding = '10px';
                th.style.border = '1px solid #e2e8f0';
                th.style.backgroundColor = '#f7fafc';
                th.style.width = '35%';
                th.style.fontWeight = '600';

                const td = document.createElement('td');
                td.textContent = String(value);
                td.style.padding = '10px';
                td.style.border = '1px solid #e2e8f0';
                td.style.wordBreak = 'break-word';

                row.appendChild(th);
                row.appendChild(td);
                table.appendChild(row);
            }
        }
        wrapper.appendChild(table);
        return wrapper;
    };

    // Append Basic Info Table
    const basicInfoTable = createTable(info, 'Basic Information');
    if (basicInfoTable) {
        container.appendChild(basicInfoTable);
    }
    
    // Append EXIF / Metadata Table
    if (exifData) {
        const exifTable = createTable(exifData, 'EXIF / Metadata');
        if (exifTable) {
            container.appendChild(exifTable);
        }
    } else {
        const noExif = document.createElement('p');
        noExif.textContent = 'No EXIF metadata found or could not be loaded (e.g. stripped by the browser or blocked by CORS restrictions).';
        noExif.style.fontStyle = 'italic';
        noExif.style.fontSize = '0.9em';
        noExif.style.color = '#718096';
        noExif.style.marginTop = '20px';
        container.appendChild(noExif);
    }
    
    return container;
}