Image To 1:33 Aspect Ratio Cropper

function processImage(originalImg, aspectRatio = "1.33:1") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse the target aspect ratio
    let targetRatio = 1.33; 

    if (typeof aspectRatio === 'number') {
        targetRatio = aspectRatio;
    } else if (typeof aspectRatio === 'string') {
        const cleanStr = aspectRatio.trim();
        // Handle strings like "1.33:1", "4:3", or "16:9"
        if (cleanStr.includes(':')) {
            const parts = cleanStr.split(':');
            const w = parseFloat(parts[0]);
            const h = parseFloat(parts[1]);
            if (!isNaN(w) && !isNaN(h) && h !== 0) {
                targetRatio = w / h;
            }
        } else {
            // Handle plain strings like "1.33"
            const parsed = parseFloat(cleanStr);
            if (!isNaN(parsed) && parsed !== 0) {
                targetRatio = parsed;
            }
        }
    }

    const ow = originalImg.naturalWidth || originalImg.width;
    const oh = originalImg.naturalHeight || originalImg.height;
    const originalRatio = ow / oh;

    let cropWidth, cropHeight, offsetX, offsetY;

    // Determine dimensions for a center crop
    if (originalRatio > targetRatio) {
        // Original image is proportionally wider than the target. 
        // We perfectly fit the height and crop the horizontal edges.
        cropHeight = oh;
        cropWidth = oh * targetRatio;
        offsetX = (ow - cropWidth) / 2;
        offsetY = 0;
    } else {
        // Original image is proportionally taller than the target. 
        // We perfectly fit the width and crop the vertical edges.
        cropWidth = ow;
        cropHeight = ow / targetRatio;
        offsetX = 0;
        offsetY = (oh - cropHeight) / 2;
    }

    // Rounding to integers to prevent sub-pixel rendering blur
    cropWidth = Math.round(cropWidth);
    cropHeight = Math.round(cropHeight);
    offsetX = Math.round(offsetX);
    offsetY = Math.round(offsetY);

    // Apply dimensions to canvas
    canvas.width = cropWidth;
    canvas.height = cropHeight;

    // Draw the cropped portion to the newly sized canvas
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(
        originalImg,
        offsetX, offsetY, cropWidth, cropHeight, // Source bounding box
        0, 0, cropWidth, cropHeight              // Destination bounding box
    );

    return canvas;
}