Image To 4:3 Aspect Ratio Converter

function processImage(originalImg, mode = "crop", padColor = "#000000") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;
    const targetRatio = 4 / 3;
    const originalRatio = originalWidth / originalHeight;

    let finalWidth, finalHeight;

    if (mode === 'pad') {
        // Pad the image to fit 4:3 without cutting anything out
        if (originalRatio > targetRatio) {
            finalWidth = originalWidth;
            finalHeight = Math.round(originalWidth / targetRatio);
        } else {
            finalHeight = originalHeight;
            finalWidth = Math.round(originalHeight * targetRatio);
        }
        
        canvas.width = finalWidth;
        canvas.height = finalHeight;
        
        ctx.fillStyle = padColor;
        ctx.fillRect(0, 0, finalWidth, finalHeight);
        
        const dx = Math.round((finalWidth - originalWidth) / 2);
        const dy = Math.round((finalHeight - originalHeight) / 2);
        
        ctx.drawImage(originalImg, dx, dy);
        
    } else if (mode === 'stretch') {
        // Stretch the image to perfectly match 4:3 without keeping original proportions
        if (originalRatio > targetRatio) {
            finalWidth = originalWidth;
            finalHeight = Math.round(originalWidth / targetRatio);
        } else {
            finalHeight = originalHeight;
            finalWidth = Math.round(originalHeight * targetRatio);
        }
        
        canvas.width = finalWidth;
        canvas.height = finalHeight;
        
        ctx.drawImage(originalImg, 0, 0, finalWidth, finalHeight);
        
    } else {
        // mode === 'crop' (Default)
        // Center-crop the image to fill 4:3 while maintaining original proportions
        if (originalRatio > targetRatio) {
            finalHeight = originalHeight;
            finalWidth = Math.round(originalHeight * targetRatio);
        } else {
            finalWidth = originalWidth;
            finalHeight = Math.round(originalWidth / targetRatio);
        }
        
        canvas.width = finalWidth;
        canvas.height = finalHeight;
        
        const sx = Math.round((originalWidth - finalWidth) / 2);
        const sy = Math.round((originalHeight - finalHeight) / 2);
        
        ctx.drawImage(
            originalImg, 
            sx, sy, finalWidth, finalHeight, 
            0, 0, finalWidth, finalHeight
        );
    }

    return canvas;
}