Image Aspect Ratio Cropper Tool

function processImage(originalImg, targetAspectRatio = "1:1") {
    // Determine the numerical target aspect ratio
    let targetAR = 1;
    
    if (typeof targetAspectRatio === 'number') {
        targetAR = targetAspectRatio;
    } else if (typeof targetAspectRatio === 'string') {
        // Sanitize string (e.g. handle "2.55:1", "16/9", " 2.55 : 1 ", or plain "1.33")
        let str = targetAspectRatio.trim().toLowerCase().replace(/\s+/g, '');
        
        if (str.includes(':')) {
            const parts = str.split(':');
            targetAR = parseFloat(parts[0]) / parseFloat(parts[1]);
        } else if (str.includes('/')) {
            const parts = str.split('/');
            targetAR = parseFloat(parts[0]) / parseFloat(parts[1]);
        } else {
            // Attempt to parse as a simple float (e.g., "2.55" or "1.33")
            targetAR = parseFloat(str);
        }
    }

    // Fallback in case of invalid input
    if (isNaN(targetAR) || targetAR <= 0) {
        targetAR = 1;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Get actual dimensions of the original image
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    
    if (!w || !h) {
        console.error("Invalid image dimensions.");
        return canvas;
    }

    const currentAR = w / h;
    
    let cropW = w;
    let cropH = h;
    let startX = 0;
    let startY = 0;

    // Compare ratios to determine where to crop
    // Use a small epsilon to avoid floating point precision issues
    const epsilon = 0.0001; 
    
    if (currentAR - targetAR > epsilon) {
        // Current image is wider than target aspect ratio -> Crop width (horizontal)
        cropW = h * targetAR;
        startX = (w - cropW) / 2;
    } else if (targetAR - currentAR > epsilon) {
        // Current image is taller than target aspect ratio -> Crop height (vertical)
        cropH = w / targetAR;
        startY = (h - cropH) / 2;
    }

    // Set canvas dimensions to the cropped size output
    canvas.width = Math.round(cropW);
    canvas.height = Math.round(cropH);

    // Draw the cropped portion onto the new canvas
    ctx.drawImage(
        originalImg,
        startX, startY, cropW, cropH,                  // Source rectangle
        0, 0, canvas.width, canvas.height              // Destination rectangle
    );

    return canvas;
}