Image Aspect Ratio 9:16 Resizer

function processImage(originalImg, mode = 'cover', backgroundColor = '#000000') {
    // Create a new canvas to draw the resized image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Target aspect ratio for 9:16
    const targetRatio = 9 / 16;
    
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;
    const imgRatio = imgWidth / imgHeight;
    
    let canvasWidth = imgWidth;
    let canvasHeight = imgHeight;
    
    // Source cropping variables
    let sx = 0, sy = 0, sw = imgWidth, sh = imgHeight;
    // Destination drawing variables
    let dx = 0, dy = 0, dw = imgWidth, dh = imgHeight;

    // Determine dimensions based on the fitting mode
    if (mode === 'cover') {
        // Crop the image to completely fill the 9:16 area without distorting
        if (imgRatio > targetRatio) {
            // Image is wider than 9:16, crop the sides
            canvasHeight = imgHeight;
            canvasWidth = canvasHeight * targetRatio;
            sw = canvasWidth;
            sh = canvasHeight;
            sx = (imgWidth - sw) / 2;
            sy = 0;
        } else {
            // Image is taller than 9:16, crop the top and bottom
            canvasWidth = imgWidth;
            canvasHeight = canvasWidth / targetRatio;
            sw = canvasWidth;
            sh = canvasHeight;
            sx = 0;
            sy = (imgHeight - sh) / 2;
        }
        dw = canvasWidth;
        dh = canvasHeight;
        
    } else if (mode === 'contain') {
        // Pad the image to fit inside 9:16 without cropping or distorting
        if (imgRatio > targetRatio) {
            // Image is wider than 9:16, pad top and bottom
            canvasWidth = imgWidth;
            canvasHeight = canvasWidth / targetRatio;
            dw = imgWidth;
            dh = imgHeight;
            dx = 0;
            dy = (canvasHeight - dh) / 2;
        } else {
            // Image is taller than 9:16, pad left and right
            canvasHeight = imgHeight;
            canvasWidth = canvasHeight * targetRatio;
            dw = imgWidth;
            dh = imgHeight;
            dx = (canvasWidth - dw) / 2;
            dy = 0;
        }
        
    } else if (mode === 'stretch') {
        // Stretch the image to 9:16, ignoring the original aspect ratio
        if (imgRatio > targetRatio) {
            canvasWidth = imgWidth;
            canvasHeight = canvasWidth / targetRatio;
        } else {
            canvasHeight = imgHeight;
            canvasWidth = canvasHeight * targetRatio;
        }
        dw = canvasWidth;
        dh = canvasHeight;
        
    } else {
        // Fallback to 'cover' if mode is unknown
        return processImage(originalImg, 'cover', backgroundColor);
    }
    
    // Set canvas dimensions (must be whole integers)
    canvas.width = Math.round(canvasWidth);
    canvas.height = Math.round(canvasHeight);
    
    // If 'contain' mode is used, fill the paddings with the background color
    if (mode === 'contain') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // Draw the processed image onto the canvas 
    // applying the calculated crop/pad/stretch coordinates
    ctx.drawImage(originalImg, sx, sy, sw, sh, dx, dy, dw, dh);
    
    return canvas;
}