Image To 1.33:1 Aspect Ratio Converter

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

    // 1.33:1 aspect ratio
    const targetRatio = 1.33;
    
    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;
    const originalRatio = originalWidth / originalHeight;

    let canvasWidth, canvasHeight;
    let drawX, drawY, drawW, drawH;

    if (mode === 'crop') {
        if (originalRatio > targetRatio) {
            // Image is wider than 1.33:1 (Crop left and right)
            canvasHeight = originalHeight;
            canvasWidth = Math.round(originalHeight * targetRatio);
            drawH = canvasHeight;
            drawW = canvasWidth;
            drawX = Math.round((originalWidth - canvasWidth) / 2);
            drawY = 0;
            
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            ctx.drawImage(originalImg, drawX, drawY, drawW, drawH, 0, 0, canvasWidth, canvasHeight);
        } else {
            // Image is taller than 1.33:1 (Crop top and bottom)
            canvasWidth = originalWidth;
            canvasHeight = Math.round(originalWidth / targetRatio);
            drawW = canvasWidth;
            drawH = canvasHeight;
            drawX = 0;
            drawY = Math.round((originalHeight - canvasHeight) / 2);

            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            ctx.drawImage(originalImg, drawX, drawY, drawW, drawH, 0, 0, canvasWidth, canvasHeight);
        }
    } else if (mode === 'pad') {
        if (originalRatio > targetRatio) {
            // Image is wider than 1.33:1 (Pad top and bottom)
            canvasWidth = originalWidth;
            canvasHeight = Math.round(originalWidth / targetRatio);
            drawW = originalWidth;
            drawH = originalHeight;
            drawX = 0;
            drawY = Math.round((canvasHeight - originalHeight) / 2);
        } else {
            // Image is taller than 1.33:1 (Pad left and right)
            canvasHeight = originalHeight;
            canvasWidth = Math.round(originalHeight * targetRatio);
            drawW = originalWidth;
            drawH = originalHeight;
            drawX = Math.round((canvasWidth - originalWidth) / 2);
            drawY = 0;
        }
        
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        // Fill the background with padding color
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
        // Draw the image in the center
        ctx.drawImage(originalImg, 0, 0, originalWidth, originalHeight, drawX, drawY, drawW, drawH);
    } else if (mode === 'stretch') {
        // Stretch the image without cropping or padding to fit 1.33:1 perfectly
        if (originalRatio > targetRatio) {
            canvasWidth = Math.round(originalHeight * targetRatio);
            canvasHeight = originalHeight;
        } else {
            canvasWidth = originalWidth;
            canvasHeight = Math.round(originalWidth / targetRatio);
        }
        
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        ctx.drawImage(originalImg, 0, 0, canvasWidth, canvasHeight);
    } else {
        // Fallback or unsupported mode - just draw original
        canvas.width = originalWidth;
        canvas.height = originalHeight;
        ctx.drawImage(originalImg, 0, 0);
    }

    return canvas;
}