Please bookmark this page to avoid losing your image tool!

Image Center Cropper

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const originalWidth = originalImg.width;
  const originalHeight = originalImg.height;

  let cropSize = Math.min(originalWidth, originalHeight);
  let sx = 0;
  let sy = 0;

  if (originalWidth > originalHeight) {
    // Image is wider than it is tall, crop the sides
    sx = (originalWidth - originalHeight) / 2;
    cropSize = originalHeight;
  } else if (originalHeight > originalWidth) {
    // Image is taller than it is wide, crop the top and bottom
    sy = (originalHeight - originalWidth) / 2;
    cropSize = originalWidth;
  }
  // If width and height are equal, cropSize is already correct and sx, sy are 0

  canvas.width = cropSize;
  canvas.height = cropSize;

  // Draw the cropped image onto the canvas
  // Parameters for drawImage:
  // image: The image to draw.
  // sx: The x-coordinate of the top-left corner of the sub-rectangle of the source image to draw.
  // sy: The y-coordinate of the top-left corner of the sub-rectangle of the source image to draw.
  // sWidth: The width of the sub-rectangle of the source image to draw.
  // sHeight: The height of the sub-rectangle of the source image to draw.
  // dx: The x-coordinate on the destination canvas at which to place the top-left corner of the source image.
  // dy: The y-coordinate on the destination canvas at which to place the top-left corner of the source image.
  // dWidth: The width to draw the image in the destination canvas.
  // dHeight: The height to draw the image in the destination canvas.
  ctx.drawImage(originalImg, sx, sy, cropSize, cropSize, 0, 0, cropSize, cropSize);

  return canvas;
}

Free Image Tool Creator

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

Create a custom image tool

Description

The Image Center Cropper is a tool that allows users to crop images to a square format by focusing on the center of the original image. It automatically determines the appropriate cropping area based on the image’s dimensions, ensuring that either the sides or the top and bottom are cropped evenly to create a balanced square output. This utility is useful for preparing images for social media profiles, avatars, product images, or any scenarios where a square aspect ratio is preferred.