Image Responsive Sizing Calculator

function processImage(originalImg, targetWidthsStr = "320,480,768,1024", previewDisplayWidth = 480) {
    const mainContainer = document.createElement('div');
    mainContainer.style.fontFamily = "Arial, sans-serif";
    mainContainer.style.padding = "10px";
    mainContainer.style.overflowX = "auto"; // Handle cases where content (like wide canvas) might overflow

    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    if (originalWidth === 0 || originalHeight === 0) {
        mainContainer.textContent = "Error: Invalid image dimensions (e.g., 0x0). Please ensure the image is fully loaded and valid before processing.";
        return mainContainer;
    }

    const aspectRatio = originalHeight / originalWidth;

    // Section 1: Original Dimensions
    const originalInfoDiv = document.createElement('div');
    originalInfoDiv.style.marginBottom = "20px";
    let originalInfoHTML = `
        <h3 style="margin-top: 0; margin-bottom: 10px;">Original Image Dimensions</h3>
        <p style="margin: 5px 0;">Width: ${originalWidth}px</p>
        <p style="margin: 5px 0;">Height: ${originalHeight}px</p>
        <p style="margin: 5px 0;">Aspect Ratio (H/W): ${aspectRatio.toFixed(4)}</p>
    `;
    originalInfoDiv.innerHTML = originalInfoHTML;
    mainContainer.appendChild(originalInfoDiv);

    // Section 2: Responsive Sizing Calculations
    const responsiveInfoDiv = document.createElement('div');
    responsiveInfoDiv.style.marginBottom = "20px";
    responsiveInfoDiv.innerHTML = `<h3 style="margin-top: 0; margin-bottom: 10px;">Responsive Sizing Calculations</h3>`;

    const targetWidths = targetWidthsStr
        .split(',')
        .map(w => parseInt(w.trim(), 10))
        .filter(w => !isNaN(w) && w > 0)
        .sort((a, b) => a - b); // Sort for better display

    if (targetWidths.length === 0) {
        responsiveInfoDiv.innerHTML += "<p style='margin: 5px 0;'>No valid target widths provided. Example format: \"300,600,900\".</p>";
    } else {
        const table = document.createElement('table');
        table.style.width = 'auto'; // Fit content, or use '100%' for full width
        table.style.minWidth = '300px'; // Ensure table is not too crunched
        table.style.borderCollapse = 'collapse';
        table.style.marginBottom = '10px';

        table.innerHTML = `
            <thead>
                <tr>
                    <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2;">Target Width (px)</th>
                    <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2;">Calculated Height (px)</th>
                </tr>
            </thead>
        `;
        const tbody = document.createElement('tbody');
        targetWidths.forEach(width => {
            const height = Math.round(width * aspectRatio);
            const row = tbody.insertRow();
            const cellWidth = row.insertCell();
            cellWidth.style.border = "1px solid #ddd";
            cellWidth.style.padding = "8px";
            cellWidth.textContent = width;

            const cellHeight = row.insertCell();
            cellHeight.style.border = "1px solid #ddd";
            cellHeight.style.padding = "8px";
            cellHeight.textContent = height;
        });
        table.appendChild(tbody);
        responsiveInfoDiv.appendChild(table);
    }
    mainContainer.appendChild(responsiveInfoDiv);

    // Section 3: Preview
    const previewDiv = document.createElement('div');
    previewDiv.innerHTML = `<h3 style="margin-top: 0; margin-bottom: 10px;">Preview</h3>`;

    if (Number.isFinite(previewDisplayWidth) && previewDisplayWidth > 0) {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const calculatedPreviewHeight = Math.round(previewDisplayWidth * aspectRatio);
        
        // Cap canvas dimensions to prevent excessively large canvases, e.g., if original image is very small
        // or previewDisplayWidth is excessively large leading to extreme upscaling or memory issues.
        // Let's set a practical max display width for preview, e.g., 2000px. Max height will follow aspect ratio.
        const effectivePreviewWidth = Math.min(previewDisplayWidth, 2000);
        const effectivePreviewHeight = Math.round(effectivePreviewWidth * aspectRatio);

        canvas.width = effectivePreviewWidth;
        canvas.height = effectivePreviewHeight;
        
        // Style canvas to be responsive to its container, but its drawing content is fixed.
        canvas.style.maxWidth = "100%";
        canvas.style.height = "auto";
        canvas.style.border = "1px solid #ccc"; // Add a border to make canvas visible

        try {
            ctx.drawImage(originalImg, 0, 0, effectivePreviewWidth, effectivePreviewHeight);
            previewDiv.appendChild(canvas);
            previewDiv.innerHTML += `<p style="margin: 5px 0;">Preview displayed at: ${effectivePreviewWidth}px &times; ${effectivePreviewHeight}px.</p>`;
             if (previewDisplayWidth > effectivePreviewWidth) {
                previewDiv.innerHTML += `<p style="margin: 5px 0; font-size: 0.9em; color: #555;">(Requested preview width ${previewDisplayWidth}px capped to ${effectivePreviewWidth}px for display).</p>`;
            }
        } catch (e) {
            console.error("Error drawing image to canvas:", e);
            previewDiv.innerHTML += `<p style="margin: 5px 0; color: red;">Error rendering preview: ${e.message}</p>`;
        }
    } else {
         previewDiv.innerHTML += `<p style="margin: 5px 0;">Preview not displayed (invalid or zero preview width specified).</p>`;
    }
    mainContainer.appendChild(previewDiv);
    
    return mainContainer;
}