Image Aspect Ratio Cropper For 1:35:1 And 1:85:1

function processImage(originalImg, cropFormat = "1:85:1") {
    let targetRatio = 1.85;
    
    // Parse the requested ratio based on string or number input
    if (typeof cropFormat === 'number') {
        targetRatio = cropFormat;
    } else if (typeof cropFormat === 'string') {
        let extracted = cropFormat.toLowerCase();
        // Extract sequence containing only numbers, colons, slashes, periods, and spaces
        const match = extracted.match(/\d[\d\:\/\. ]*\d|\d+/);
        if (match) {
            extracted = match[0].trim();
            let parts = [];
            
            if (/[:\/]/.test(extracted)) {
                parts = extracted.split(/[:\/]/).map(s => s.trim());
            } else if (/\s+/.test(extracted)) {
                parts = extracted.split(/\s+/);
            } else {
                parts = [extracted];
            }

            // Handle formats correctly 
            if (parts.length === 3) {
                // e.g., "1:85:1" or "1 35 1" which act as 1.85:1 and 1.35:1
                const whole = parseFloat(parts[0]);
                const fraction = parts[1];
                const den = parseFloat(parts[2]);
                if (!isNaN(whole) && !isNaN(parseFloat(fraction)) && !isNaN(den) && den !== 0) {
                    targetRatio = parseFloat(`${whole}.${fraction}`) / den;
                }
            } else if (parts.length === 2) {
                // e.g., "1.85:1" or "16:9"
                const num = parseFloat(parts[0]);
                const den = parseFloat(parts[1]);
                if (!isNaN(num) && !isNaN(den) && den !== 0) {
                    targetRatio = num / den;
                }
            } else if (parts.length === 1) {
                // e.g., "1.85"
                const num = parseFloat(parts[0]);
                if (!isNaN(num)) {
                    targetRatio = num;
                }
            }
        }
    }
    
    // Fallback if target ratio is invalid
    if (targetRatio <= 0 || isNaN(targetRatio)) {
        targetRatio = 1.85; 
    }

    const w = originalImg.width;
    const h = originalImg.height;
    
    // Protect against uninitialized images
    if (w === 0 || h === 0) {
        return originalImg;
    }

    const currentRatio = w / h;
    let cropWidth = w;
    let cropHeight = h;
    let offsetX = 0;
    let offsetY = 0;

    // Calculate crop dimensions to center the image effectively
    if (currentRatio > targetRatio) {
        // Image is wider than target ratio - crop horizontally left and right
        cropWidth = h * targetRatio;
        offsetX = (w - cropWidth) / 2;
    } 
    else if (currentRatio < targetRatio) {
        // Image is taller than target ratio - crop vertically top and bottom
        cropHeight = w / targetRatio;
        offsetY = (h - cropHeight) / 2;
    }

    // Set up output Canvas
    const canvas = document.createElement('canvas');
    canvas.width = Math.max(1, Math.round(cropWidth));
    canvas.height = Math.max(1, Math.round(cropHeight));
    
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Draw cropped portion from original image onto the whole canvas
    ctx.drawImage(
        originalImg,
        Math.round(offsetX), Math.round(offsetY), // source x, y
        Math.round(cropWidth), Math.round(cropHeight), // source width, height
        0, 0, // destination x, y
        canvas.width, canvas.height // destination width, height
    );

    return canvas;
}