Image Aspect Ratio Warper

function processImage(originalImg, aspectRatio = "16:9", scalingMethod = "preserve-area") {
    let ratio = 1;

    // Parse the aspect ratio input
    if (typeof aspectRatio === 'number') {
        ratio = aspectRatio;
    } else if (typeof aspectRatio === 'string') {
        if (aspectRatio.includes(':')) {
            const parts = aspectRatio.split(':');
            ratio = parseFloat(parts[0]) / parseFloat(parts[1]);
        } else if (aspectRatio.includes('/')) {
            const parts = aspectRatio.split('/');
            ratio = parseFloat(parts[0]) / parseFloat(parts[1]);
        } else {
            ratio = parseFloat(aspectRatio);
        }
    }

    // Fall back to 1:1 if invalid input is provided
    if (isNaN(ratio) || ratio <= 0) {
        ratio = 1; 
    }

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;
    let targetWidth, targetHeight;

    // Determine new dimensions based on the chosen scaling method
    switch (scalingMethod.toLowerCase()) {
        case 'preserve-width':
            targetWidth = originalWidth;
            targetHeight = originalWidth / ratio;
            break;
        case 'preserve-height':
            targetHeight = originalHeight;
            targetWidth = originalHeight * ratio;
            break;
        case 'preserve-area':
        default:
            // Calculate a new width/height that matches the target aspect ratio 
            // while preserving the original pixel count (area)
            const originalArea = originalWidth * originalHeight;
            targetWidth = Math.sqrt(originalArea * ratio);
            targetHeight = targetWidth / ratio;
            break;
    }

    const canvas = document.createElement('canvas');
    canvas.width = Math.round(targetWidth);
    canvas.height = Math.round(targetHeight);

    const ctx = canvas.getContext('2d');
    
    // Maximize interpolation quality when stretching/squashing
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Draw the image, which naturally warps (stretches or squashes) it into the new dimensions
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    return canvas;
}