Image Aspect Ratio Changer To 2.55:1 And 1.33:1

function processImage(originalImg, targetRatio = "2.55:1", fitMode = "letterbox", backgroundColor = "#000000") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse the target ratio string
    let parsedStr = String(targetRatio).trim().replace(',', '.');
    let targetR;
    
    // Handle formats like "2.55:1", "1.33:1", "16:9"
    if (parsedStr.includes(':')) {
        const parts = parsedStr.split(':');
        targetR = parseFloat(parts[0]) / (parseFloat(parts[1]) || 1);
    } 
    // Handle description-style formats like "2 55 1" -> 2.55:1
    else if (parsedStr.split(' ').length === 3) {
        const parts = parsedStr.split(' ');
        const num = parseFloat(`${parts[0]}.${parts[1]}`);
        const den = parseFloat(parts[2]) || 1;
        targetR = num / den;
    } 
    else {
        targetR = parseFloat(parsedStr);
    }
    
    // Default fallback if parsing fails
    if (isNaN(targetR) || targetR <= 0) {
        targetR = 2.55; 
    }

    const origW = originalImg.width;
    const origH = originalImg.height;
    const origR = origW / origH;

    let canvasW, canvasH;
    let drawX = 0, drawY = 0;

    // Determine dimensions based on 'crop' or 'letterbox' fit modes
    if (fitMode === 'crop') {
        if (origR > targetR) {
            // Image is wider than the target ratio, crop the sides
            canvasH = origH;
            canvasW = Math.round(origH * targetR);
            drawX = Math.round(-(origW - canvasW) / 2);
        } else {
            // Image is taller than the target ratio, crop top and bottom
            canvasW = origW;
            canvasH = Math.round(origW / targetR);
            drawY = Math.round(-(origH - canvasH) / 2);
        }
    } else {
        // letterbox (adds horizontal or vertical padding)
        if (origR > targetR) {
            // Image is wider than the target ratio, add padding to top and bottom (letterbox)
            canvasW = origW;
            canvasH = Math.round(origW / targetR);
            drawY = Math.round((canvasH - origH) / 2);
        } else {
            // Image is taller than the target ratio, add padding to sides (pillarbox)
            canvasH = origH;
            canvasW = Math.round(origH * targetR);
            drawX = Math.round((canvasW - origW) / 2);
        }
    }

    canvas.width = canvasW;
    canvas.height = canvasH;

    // Fill the background (useful for letterbox mode)
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the image
    ctx.drawImage(originalImg, drawX, drawY, origW, origH);

    return canvas;
}