Image Cropper For Social Media Platforms

function processImage(originalImg, platform = "instagram_square", customWidth = 1, customHeight = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions. Fallback to width/height.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image dimensions might be invalid or not yet loaded.
    if (imgWidth <= 0 || imgHeight <= 0) {
        console.warn("Original image has invalid dimensions (width or height is 0 or less). Returning a 1x1 empty canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    // Predefined aspect ratios for various social media platforms and common use cases.
    // Ratio is calculated as width / height.
    const PLATFORM_ASPECT_RATIOS = {
        "instagram_square": 1 / 1,         // Common for Instagram posts, profiles
        "instagram_portrait": 4 / 5,       // Instagram portrait posts
        "instagram_story": 9 / 16,        // Instagram Stories, Reels, also TikTok, YouTube Shorts
        "facebook_post_landscape": 1.91 / 1, // Facebook shared link previews, ads
        "facebook_profile": 1 / 1,         // Facebook profile pictures (often displayed as circle)
        "twitter_header": 3 / 1,           // Twitter (X) header image
        "twitter_post_image": 16 / 9,      // Twitter (X) single image in feed (can also be 1:1 or other)
        "youtube_thumbnail": 16 / 9,       // YouTube video thumbnails
        "linkedin_profile": 1 / 1,         // LinkedIn profile pictures
        "linkedin_banner_personal": 4 / 1, // LinkedIn personal profile banner (1584x396px)
        "pinterest_pin": 2 / 3,            // Common Pinterest pin aspect ratio
        // Generic ratios for convenience
        "ratio_1_1": 1 / 1,                // Square
        "ratio_16_9": 16 / 9,              // Widescreen landscape (common for videos, presentations)
        "ratio_9_16": 9 / 16,              // Widescreen portrait (common for mobile screens, stories)
        "ratio_4_3": 4 / 3,                // Traditional TV/monitor landscape
        "ratio_3_4": 3 / 4,                // Traditional portrait
        "ratio_3_2": 3 / 2,                // Common in photography (DSLRs)
        "ratio_2_3": 2 / 3,                // Common portrait photography (same as Pinterest pin)
    };

    let targetAspectRatio;

    if (platform === "custom") {
        if (customWidth <= 0 || customHeight <= 0) {
            console.warn("Custom width and height for cropping must be positive. Defaulting to a 1:1 ratio.");
            targetAspectRatio = 1 / 1; // Default to 1:1 if custom dimensions are invalid
        } else {
            targetAspectRatio = customWidth / customHeight;
        }
    } else if (PLATFORM_ASPECT_RATIOS.hasOwnProperty(platform)) {
        targetAspectRatio = PLATFORM_ASPECT_RATIOS[platform];
    } else {
        console.warn(`Platform preset "${platform}" not recognized. Defaulting to "instagram_square" (1:1 ratio).`);
        targetAspectRatio = PLATFORM_ASPECT_RATIOS["instagram_square"]; // Fallback to a common default
    }

    const currentAspectRatio = imgWidth / imgHeight;

    let sx = 0, sy = 0, sWidth = imgWidth, sHeight = imgHeight;

    // Calculate crop dimensions to achieve the target aspect ratio (center-crop logic)
    if (currentAspectRatio > targetAspectRatio) {
        // Image is wider than the target aspect ratio (e.g., landscape source, square target)
        // Crop the width (sides of the image will be cut). Height is the limiting dimension.
        sWidth = imgHeight * targetAspectRatio;
        sx = (imgWidth - sWidth) / 2;
        // sHeight remains imgHeight
    } else if (currentAspectRatio < targetAspectRatio) {
        // Image is taller than the target aspect ratio (e.g., portrait source, square target)
        // Crop the height (top/bottom of the image will be cut). Width is the limiting dimension.
        sHeight = imgWidth / targetAspectRatio;
        sy = (imgHeight - sHeight) / 2;
        // sWidth remains imgWidth
    }
    // If currentAspectRatio is equal to targetAspectRatio, no cropping is needed.
    // sx, sy, sWidth, sHeight will define the rectangle to extract from the original image.

    // Set the canvas dimensions to the size of the cropped area.
    // Use Math.round to ensure integer dimensions for the canvas, as required.
    canvas.width = Math.round(sWidth);
    canvas.height = Math.round(sHeight);
    
    // Ensure canvas dimensions are at least 1x1 to prevent errors with drawImage
    // if sWidth or sHeight were calculated or rounded to 0.
    if (canvas.width <= 0) {
        canvas.width = 1;
    }
    if (canvas.height <= 0) {
        canvas.height = 1;
    }
    
    // Draw the cropped portion of the original image onto the new canvas.
    // The source rectangle is (sx, sy, sWidth, sHeight) from the original image.
    // The destination rectangle (0, 0, canvas.width, canvas.height) fills the entire new canvas.
    ctx.drawImage(
        originalImg,
        sx,             // Source X coordinate
        sy,             // Source Y coordinate
        sWidth,         // Source width
        sHeight,        // Source height
        0,              // Destination X coordinate on canvas
        0,              // Destination Y coordinate on canvas
        canvas.width,   // Destination width on canvas (same as cropped width)
        canvas.height   // Destination height on canvas (same as cropped height)
    );

    return canvas;
}