Image Aspect Ratio Tool

function processImage(originalImg, aspectRatioStr = "16:9", fitMode = "crop", paddingColor = "#000000") {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // Parse target aspect ratio (supports formats like "16:9", "4/3", "1x1")
    let [wRatio, hRatio] = aspectRatioStr.split(/[:/x]/i).map(Number);
    if (!wRatio || !hRatio || isNaN(wRatio) || isNaN(hRatio)) {
        wRatio = 16;
        hRatio = 9;
    }
    const targetRatio = wRatio / hRatio;

    const ow = originalImg.width;
    const oh = originalImg.height;
    const originalRatio = ow / oh;

    if (fitMode.toLowerCase() === "pad") {
        let canvasW, canvasH;
        // Calculate canvas dimensions keeping the original image fully visible
        if (originalRatio > targetRatio) {
            // Original is wider than target ratio, add padding to top/bottom
            canvasW = ow;
            canvasH = ow / targetRatio;
        } else {
            // Original is taller than target ratio, add padding to left/right
            canvasH = oh;
            canvasW = oh * targetRatio;
        }
        
        canvas.width = Math.round(canvasW);
        canvas.height = Math.round(canvasH);
        
        // Fill canvas with padding color
        ctx.fillStyle = paddingColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Draw the image centered
        const dx = (canvas.width - ow) / 2;
        const dy = (canvas.height - oh) / 2;
        ctx.drawImage(originalImg, Math.round(dx), Math.round(dy), ow, oh);
    } else {
        // Default: "crop" mode (center crop to completely fill target aspect ratio)
        let sWidth, sHeight;
        if (originalRatio > targetRatio) {
            // Original is wider than target ratio, clip left/right sides
            sHeight = oh;
            sWidth = oh * targetRatio;
        } else {
            // Original is taller than target ratio, clip top/bottom sides
            sWidth = ow;
            sHeight = ow / targetRatio;
        }
        
        canvas.width = Math.round(sWidth);
        canvas.height = Math.round(sHeight);
        
        // Calculate centered source coordinates
        const sx = (ow - sWidth) / 2;
        const sy = (oh - sHeight) / 2;
        
        // Draw the cropped portion to the canvas
        ctx.drawImage(
            originalImg,
            Math.round(sx), Math.round(sy), Math.round(sWidth), Math.round(sHeight),
            0, 0, canvas.width, canvas.height
        );
    }

    return canvas;
}