Custom Aspect Ratio Image Cropper Tool

function processImage(originalImg, aspectRatioStr = "1.85:1") {
    let targetRatio = 1;
    
    // Convert parameter to string for robust parsing
    aspectRatioStr = typeof aspectRatioStr === 'number' ? String(aspectRatioStr) : aspectRatioStr;
    aspectRatioStr = typeof aspectRatioStr === 'string' ? aspectRatioStr.trim().toLowerCase() : "1.85:1";
    
    // Parse the aspect ratio given
    // Handle standard formats like "16:9" or "1.85:1"
    if (aspectRatioStr.includes(':')) {
        const parts = aspectRatioStr.split(':');
        targetRatio = parseFloat(parts[0]) / parseFloat(parts[1]);
    } 
    // Handle string format missing punctuation like "1 85 1" -> "1.85:1"
    else if (aspectRatioStr.split(' ').length === 3) {
        const parts = aspectRatioStr.split(' ');
        targetRatio = parseFloat(`${parts[0]}.${parts[1]}`) / parseFloat(parts[2]);
    } 
    // Handle raw numbers or single decimals like "1.85"
    else {
        targetRatio = parseFloat(aspectRatioStr);
    }
    
    // Fallback if the input resulted in a NaN or invalid ratio
    if (isNaN(targetRatio) || targetRatio <= 0) {
        targetRatio = originalImg.width / originalImg.height;
    }
    
    const originalW = originalImg.width;
    const originalH = originalImg.height;
    const originalRatio = originalW / originalH;
    
    let cropW, cropH, startX, startY;
    
    // Determine the cropping dimensions & coordinates (Center Crop)
    if (originalRatio > targetRatio) {
        // Original is wider than target ratio: crop the sides (left and right)
        cropH = originalH;
        cropW = Math.round(cropH * targetRatio);
        startX = Math.round((originalW - cropW) / 2);
        startY = 0;
    } else {
        // Original is taller than target ratio: crop the top and bottom
        cropW = originalW;
        cropH = Math.round(cropW / targetRatio);
        startX = 0;
        startY = Math.round((originalH - cropH) / 2);
    }
    
    // Create canvas to draw the cropped image
    const canvas = document.createElement('canvas');
    canvas.width = cropW;
    canvas.height = cropH;
    
    const ctx = canvas.getContext('2d');
    
    // Draw the image, cropping it smoothly via the source geometry arguments
    ctx.drawImage(
        originalImg, 
        startX, startY, cropW, cropH, // Source dimensions (cropping frame)
        0, 0, cropW, cropH            // Destination dimensions (canvas frame)
    );
    
    return canvas;
}