Photo Square Cropping Tool

function processImage(originalImg) {
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions are not valid (e.g., image not loaded yet or failed to load)
    if (originalWidth === 0 || originalHeight === 0) {
        console.warn("Image dimensions are zero. Cannot crop. Returning a 0x0 canvas.");
        // Create and return an empty 0x0 canvas as per specification (must return a canvas)
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 0;
        errorCanvas.height = 0;
        return errorCanvas;
    }

    // Determine the side length of the square crop.
    // This will be the smaller of the original image's width or height.
    const size = Math.min(originalWidth, originalHeight);

    // Calculate the starting x and y coordinates for cropping.
    // This will center the crop on the larger dimension.
    let sx = 0; // Source X
    let sy = 0; // Source Y

    if (originalWidth > originalHeight) {
        // Image is wider than it is tall (landscape orientation)
        // Crop from the horizontal center
        sx = (originalWidth - size) / 2;
        sy = 0;
    } else if (originalHeight > originalWidth) {
        // Image is taller than it is wide (portrait orientation)
        // Crop from the vertical center
        sx = 0;
        sy = (originalHeight - size) / 2;
    }
    // If originalWidth === originalHeight, sx and sy remain 0, taking the whole image.

    // Create a new canvas element to draw the cropped image on.
    const canvas = document.createElement('canvas');
    canvas.width = size;  // The canvas will be square.
    canvas.height = size; // The canvas will be square.

    // Get the 2D rendering context of the canvas.
    const ctx = canvas.getContext('2d');

    // Draw the cropped portion of the original image onto the canvas.
    // ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    // - image: The source image object.
    // - sx, sy: The x and y coordinates of the top-left corner of the sub-rectangle
    //           of the source image to draw into the destination context.
    // - sWidth, sHeight: The width and height of the sub-rectangle of the source image.
    // - dx, dy: The x and y coordinates in the destination canvas at which to place
    //           the top-left corner of the source image.
    // - dWidth, dHeight: The width and height to draw the image in the destination canvas.
    ctx.drawImage(originalImg, sx, sy, size, size, 0, 0, size, size);

    // Return the canvas element containing the squared image.
    return canvas;
}