Image Aspect Ratio Calculator Tool

function processImage(originalImg, outputFormat = "ratio", decimalPrecision = 2) {
    // Helper function for GCD (Greatest Common Divisor) using Euclidean algorithm
    // Assumes a and b are non-negative integers, which naturalWidth/Height are.
    function gcd(a, b) {
        if (b === 0) {
            return a;
        }
        return gcd(b, a % b);
    }

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    let aspectRatioText = "";
    const displayOutputFormat = outputFormat; // Used for messaging, preserves original input
    let validFormat = true;

    // Sanitize decimalPrecision parameter
    // It should be an integer, ideally between 0 and 100 (common toFixed range).
    let sanPrecision;
    if (typeof decimalPrecision === 'string') {
        const parsed = parseInt(decimalPrecision, 10);
        // If parsing fails (NaN), use the default value of 2.
        sanPrecision = isNaN(parsed) ? 2 : parsed;
    } else if (typeof decimalPrecision === 'number' && isFinite(decimalPrecision)) {
        // If it's a finite number, round it to the nearest integer.
        sanPrecision = Math.round(decimalPrecision);
    } else {
        // If it's any other type (null, undefined, non-finite number), or failed above, use default 2.
        sanPrecision = 2;
    }

    // Clamp precision to a sensible range [0, 100].
    if (sanPrecision < 0) sanPrecision = 0;
    if (sanPrecision > 100) sanPrecision = 100;


    // Determine aspect ratio text based on outputFormat
    if (outputFormat === "ratio") {
        if (width === 0 && height === 0) {
            aspectRatioText = "Undefined (0x0)";
        } else if (width === 0) { // Height is non-zero
            aspectRatioText = "0:1"; // e.g. 0x100 image
        } else if (height === 0) { // Width is non-zero
            aspectRatioText = "1:0"; // e.g. 100x0 image
        } else {
            const commonDivisor = gcd(width, height);
            const ratioWidth = width / commonDivisor;
            const ratioHeight = height / commonDivisor;
            aspectRatioText = `${ratioWidth}:${ratioHeight}`;
        }
    } else if (outputFormat === "decimal") {
        if (width === 0 && height === 0) {
            aspectRatioText = "Undefined (0x0)";
        } else if (height === 0) { // Width is non-zero
            aspectRatioText = "Infinity (height is 0)";
        } else {
            const decimalRatio = width / height;
            aspectRatioText = decimalRatio.toFixed(sanPrecision);
        }
    } else {
        validFormat = false;
        // aspectRatioText remains empty, specific error message handled in UI.
    }

    // Create HTML elements for display
    const resultElement = document.createElement('div');
    resultElement.style.padding = '15px';
    resultElement.style.fontFamily = 'Arial, Helvetica, sans-serif';
    resultElement.style.textAlign = 'center';
    resultElement.style.border = '1px solid #e0e0e0'; // Light gray border
    resultElement.style.borderRadius = '8px'; // Softer corners
    resultElement.style.backgroundColor = '#f9f9f9'; // Off-white background
    resultElement.style.display = 'inline-block'; // Fit content width rather than full block width
    resultElement.style.margin = '10px'; // Margin for spacing if multiple results shown
    resultElement.style.boxShadow = '0 2px 5px rgba(0,0,0,0.05)'; // Subtle shadow
    resultElement.style.minWidth = '240px'; // Minimum width for aesthetics
    resultElement.style.maxWidth = 'calc(100% - 20px)'; // Max width responsive, considering margin

    const header = document.createElement('h4'); // Using h4 for semantic structure
    header.textContent = 'Image Aspect Ratio';
    header.style.margin = '0 0 12px 0'; // Margin bottom for spacing
    header.style.color = '#2c3e50'; // Dark, slate gray color for text
    header.style.fontSize = '17px'; // Slightly smaller, balanced H4
    header.style.fontWeight = '600'; // Semi-bold

    const dimsP = document.createElement('p');
    // Using innerHTML to allow for <strong> tags for emphasis
    dimsP.innerHTML = `Dimensions: <strong style="color:#34495e;">${width}px</strong> × <strong style="color:#34495e;">${height}px</strong>`;
    dimsP.style.margin = '8px 0';
    dimsP.style.fontSize = '14px';
    dimsP.style.color = '#555'; // Medium gray for secondary text

    const ratioP = document.createElement('p');
    ratioP.style.margin = '8px 0 0 0'; // Remove bottom margin as it's the last element
    ratioP.style.fontSize = '16px'; // Slightly larger for the main result
    ratioP.style.color = '#333'; // Dark gray for primary text

    if (validFormat) {
        // Display the calculated aspect ratio
        // Using span for specific styling of the format type and the result itself
        ratioP.innerHTML = `Aspect Ratio <span style="font-weight:normal; color:#7f8c8d;">(${displayOutputFormat})</span>: <strong style="color:#2980b9;">${aspectRatioText}</strong>`;
    } else {
        // Display an error message for invalid format
        ratioP.innerHTML = `Invalid format: "<span style="color:#c0392b; font-style:italic;">${displayOutputFormat}</span>". Use 'ratio' or 'decimal'.`;
        ratioP.style.color = '#e74c3c'; // Error message in red
    }

    resultElement.appendChild(header);
    resultElement.appendChild(dimsP);
    resultElement.appendChild(ratioP);

    return resultElement;
}