Image To 12:9 Aspect Ratio Converter

function processImage(originalImg, fitMode = "cover", backgroundColor = "#000000") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 12:9 is equivalent to 4:3
    const targetRatio = 12 / 9;
    
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;
    const imgRatio = imgWidth / imgHeight;

    let canvasWidth, canvasHeight;
    let drawX = 0, drawY = 0, drawWidth = imgWidth, drawHeight = imgHeight;

    if (fitMode === "cover") {
        if (imgRatio > targetRatio) {
            // Image is wider than 12:9, crop the sides
            canvasHeight = imgHeight;
            canvasWidth = Math.round(imgHeight * targetRatio);
            drawWidth = canvasWidth;
            drawX = Math.round((imgWidth - canvasWidth) / 2);
            drawY = 0;
        } else {
            // Image is taller than 12:9, crop the top and bottom
            canvasWidth = imgWidth;
            canvasHeight = Math.round(imgWidth / targetRatio);
            drawHeight = canvasHeight;
            drawX = 0;
            drawY = Math.round((imgHeight - canvasHeight) / 2);
        }
        
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        // Draw and crop the image
        ctx.drawImage(originalImg, drawX, drawY, drawWidth, drawHeight, 0, 0, canvasWidth, canvasHeight);
        
    } else {
        // fitMode is "contain" (adds padding to retain the full original image)
        if (imgRatio > targetRatio) {
            // Image is wider, pad the top and bottom
            canvasWidth = imgWidth;
            canvasHeight = Math.round(imgWidth / targetRatio);
            drawX = 0;
            drawY = Math.round((canvasHeight - imgHeight) / 2);
        } else {
            // Image is taller, pad the sides
            canvasHeight = imgHeight;
            canvasWidth = Math.round(imgHeight * targetRatio);
            drawX = Math.round((canvasWidth - imgWidth) / 2);
            drawY = 0;
        }
        
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        // Fill background
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);

        // Draw the full image in the center
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight, drawX, drawY, imgWidth, imgHeight);
    }

    return canvas;
}