Please bookmark this page to avoid losing your image tool!

Photo Square Cropping Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Photo Square Cropping Tool allows users to crop images into a square format. It automatically centers the crop on the original image, ensuring that the resulting image retains the most important visual elements. This tool is particularly useful for preparing images for social media profiles, where square images are often required. It can also be beneficial for applying consistent framing across a series of images, improving the overall aesthetic when displaying them together.

Leave a Reply

Your email address will not be published. Required fields are marked *