TV Aspect Ratio Image Converter

function processImage(originalImg, aspectRatio = "16:9", fitMode = "pad", bgColor = "#000000") {
    // Parse the aspect ratio (e.g., "16:9", "4:3", "21:9")
    let parts = aspectRatio.split(':');
    let ratioW = parseFloat(parts[0]);
    let ratioH = parseFloat(parts[1]);

    // Fallback to standard 16:9 if the input is malformed
    if (isNaN(ratioW) || isNaN(ratioH) || ratioW <= 0 || ratioH <= 0) {
        ratioW = 16;
        ratioH = 9;
    }

    const targetRatio = ratioW / ratioH;
    const origWidth = originalImg.width;
    const origHeight = originalImg.height;
    const origRatio = origWidth / origHeight;

    let canvasWidth, canvasHeight;
    let drawX = 0, drawY = 0;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    if (fitMode.toLowerCase() === 'crop') {
        // "crop": Fill the target aspect ratio completely, cropping the excess outside
        if (origRatio > targetRatio) {
            // Image is wider than TV ratio. Match height, crop width.
            canvasHeight = origHeight;
            canvasWidth = Math.round(origHeight * targetRatio);
            drawX = Math.round((canvasWidth - origWidth) / 2); // negative offset to center
            drawY = 0;
        } else {
            // Image is taller than TV ratio. Match width, crop height.
            canvasWidth = origWidth;
            canvasHeight = Math.round(origWidth / targetRatio);
            drawX = 0;
            drawY = Math.round((canvasHeight - origHeight) / 2); // negative offset to center
        }
    } else {
        // "pad": Letterboxing (black bars top/bottom) or Pillarboxing (black bars left/right)
        if (origRatio > targetRatio) {
            // Image is wider: Fit to canvas width, add letterbox padding on top and bottom
            canvasWidth = origWidth;
            canvasHeight = Math.round(origWidth / targetRatio);
            drawX = 0;
            drawY = Math.round((canvasHeight - origHeight) / 2); // positive offset
        } else {
            // Image is taller: Fit to canvas height, add pillarbox padding on left and right
            canvasHeight = origHeight;
            canvasWidth = Math.round(origHeight * targetRatio);
            drawX = Math.round((canvasWidth - origWidth) / 2); // positive offset
            drawY = 0;
        }
    }

    // Set canvas dimensions
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Fill with background color (creates the TV bars)
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Ensure quality smoothing
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Draw the image
    ctx.drawImage(originalImg, drawX, drawY, origWidth, origHeight);

    return canvas;
}