Circle Crop Image

Crop an image into a circle by clipping the largest centered square. A 200 by 80 picture becomes an 80 by 80 PNG, and the corners outside the circle are transparent.

The square in the middle

The side is the smaller of the width and the height. The source is shifted so that square sits in the center. A 200 by 80 picture uses side 80, a horizontal offset of 60, and a vertical offset of 0. The left and right strips are left out. A 100 by 50 picture uses side 50 and a horizontal offset of 25. A square stays its own size, with both offsets at 0. The canvas is that side in both directions. The circle is centered, and the radius is half the side. Pixels outside the circle are clear because the canvas is cleared before the clip. The button reads Download PNG. The file name ends in circle-crop-image.png.

What you cannot aim

There is no drag handle and no offset field. The circle is always the center. A face at the edge of a wide photo can be cut off. Crop the photo first if you need a different center, then drop that crop here. There is no radius slider. The circle always touches the four midpoints of the square. A JPEG source is saved as PNG so the clear corners can exist. A drop that is not a picture shows Please upload an image. The button stays disabled until a preview exists. Round Corners Image keeps the full rectangle and only curves the corners. This page throws away the strips outside the square.

How to check the wide photo

Drop a picture that is wider than it is tall. The preview should be square, and the height should match the source height. The width should match that same number, not the source width. On the 200 by 80 example, both sides of the PNG are 80. If the download is still 200 wide, the circle crop did not run. Transparent corners show the checker of the page behind the preview. Those corners stay transparent in the PNG. They are not filled white.

The crop stays in the tab

The clip runs in this browser. The photo is not uploaded. The PNG can be larger than a JPEG source because of the format change, even though the pixel square is smaller than a wide original. Keep the original if you still need the strips that were left outside the square. A new drop replaces the preview. On 200 by 80 the PNG is 80 by 80 and the unused strips are 60 pixels on the left and 60 on the right. A 100 by 50 picture uses a 25 pixel inset on the left and the right. A square uses no inset. Those three sizes are enough to see that the side is the smaller dimension and the circle is centered. The corners stay clear in each case.