Image Aspect Ratio Resizer To 1.33:1 And 1.85:1 Converter

function processImage(originalImg, targetAspectRatio = "1.33:1", resizeMode = "contain", backgroundColor = "#000000") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse the requested aspect ratio based on common string patterns or explicit numbers
    let targetRatio = 4 / 3; // Default is 1.33:1
    const ratioStr = String(targetAspectRatio).toLowerCase().replace(/,/g, '.');
    
    if (ratioStr.includes('1.85') || ratioStr.includes('1 85')) {
        targetRatio = 1.85;
    } else if (ratioStr.includes('1.33') || ratioStr.includes('1 33')) {
        targetRatio = 4 / 3; // 1.3333... commonly used for 4:3
    } else {
        // Fallback to extract any valid float if custom ratio is provided
        const parsed = parseFloat(ratioStr.replace(/[^0-9.]/g, ''));
        if (!isNaN(parsed) && parsed > 0) {
            targetRatio = parsed;
        }
    }

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

    let canvasW, canvasH;
    const mode = String(resizeMode).toLowerCase() === "cover" ? "cover" : "contain";

    // Calculate canvas bounds based on the chosen fitting mode
    if (mode === "contain") {
        // Ensure the entire original image fully fits inside the new ratio canvas (Letterbox/Pillarbox)
        if (origRatio > targetRatio) {
            canvasW = origW;
            canvasH = Math.round(origW / targetRatio);
        } else {
            canvasH = origH;
            canvasW = Math.round(origH * targetRatio);
        }
    } else { 
        // "cover" means fill the new ratio canvas completely and crop the excess part of the original image
        if (origRatio > targetRatio) {
            canvasH = origH;
            canvasW = Math.round(origH * targetRatio);
        } else {
            canvasW = origW;
            canvasH = Math.round(origW / targetRatio);
        }
    }

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

    // Fill the background color (useful for "contain" mode letterboxing/pillarboxing)
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvasW, canvasH);

    // Draw and composite the image appropriately based on the boundaries
    if (mode === "contain") {
        const dx = Math.round((canvasW - origW) / 2);
        const dy = Math.round((canvasH - origH) / 2);
        ctx.drawImage(originalImg, dx, dy, origW, origH);
    } else {
        const sx = Math.round((origW - canvasW) / 2);
        const sy = Math.round((origH - canvasH) / 2);
        ctx.drawImage(originalImg, sx, sy, canvasW, canvasH, 0, 0, canvasW, canvasH);
    }

    return canvas;
}