Video To 2.55:1 Aspect Ratio Converter

function processImage(originalImg, mode = "pad", backgroundColor = "#000000") {
    // Determine dimensions depending on whether an Image or Video was passed
    const isVideo = originalImg instanceof HTMLVideoElement;
    const origW = isVideo ? originalImg.videoWidth : (originalImg.naturalWidth || originalImg.width);
    const origH = isVideo ? originalImg.videoHeight : (originalImg.naturalHeight || originalImg.height);
    
    if (!origW || !origH) {
        throw new Error("Invalid image or video dimensions");
    }

    const targetRatio = 2.55;
    const currentRatio = origW / origH;
    
    let canvasW, canvasH;
    let drawX = 0, drawY = 0;
    let drawW = origW, drawH = origH;
    let sourceX = 0, sourceY = 0;
    let sourceW = origW, sourceH = origH;

    // Check padding vs cropping mode
    if (mode.toLowerCase() === "crop") {
        if (currentRatio > targetRatio) {
            // Original is wider than 2.55:1 -> Crop horizontally (left and right)
            canvasW = origH * targetRatio;
            canvasH = origH;
            sourceX = (origW - canvasW) / 2;
            sourceW = canvasW;
        } else {
            // Original is taller than 2.55:1 -> Crop vertically (top and bottom)
            canvasW = origW;
            canvasH = origW / targetRatio;
            sourceY = (origH - canvasH) / 2;
            sourceH = canvasH;
        }
        drawW = canvasW;
        drawH = canvasH;
    } else {
        // Pad mode (letterbox / pillarbox) to preserve the entire image
        if (currentRatio > targetRatio) {
            // Original is wider than 2.55:1 -> Pad vertically (top and bottom)
            canvasW = origW;
            canvasH = origW / targetRatio;
            drawY = (canvasH - origH) / 2;
        } else {
            // Original is taller than 2.55:1 -> Pad horizontally (left and right)
            canvasW = origH * targetRatio;
            canvasH = origH;
            drawX = (canvasW - origW) / 2;
        }
    }

    const canvas = document.createElement("canvas");
    canvas.width = canvasW;
    canvas.height = canvasH;
    const ctx = canvas.getContext("2d");

    // Fill background if padding
    if (mode.toLowerCase() !== "crop") {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvasW, canvasH);
    }

    // Draw the source onto the canvas
    ctx.drawImage(originalImg, sourceX, sourceY, sourceW, sourceH, drawX, drawY, drawW, drawH);

    return canvas;
}