How the image cropper works
The browser applies quarter-turn rotation and optional flips, maps the crop rectangle to transformed image pixels, draws that source region onto a new canvas, and exports a metadata-free image.
output = transformed source pixels inside the crop rectangleThe crop rectangle uses pixel coordinates in the rotated image, then the selected region is encoded in the chosen format.
Crop a landscape photo to a centered 1:1 square
Selecting 1:1 creates the largest centered square that fits the transformed image. Drag the selection to reposition it, resize from a corner, or enter exact X, Y, width, and height values before export.
Using the processed image
Keep the exported dimensions, format, transparency, and compression level appropriate for where the image will be used.
context.drawImage(
source, cropX, cropY, cropWidth, cropHeight,
0, 0, cropWidth, cropHeight
);const size = Math.min(width, height);
const x = (width - size) / 2;
const y = (height - size) / 2;Using the result accurately
Choose an aspect ratio that matches the final placement and leave enough space around important subjects. Use numeric controls or arrow-key movement for precise placement, then verify the output dimensions before downloading.
Cropping permanently removes pixels outside the selection. Editor zoom changes only the working view, extreme rotations or repeated lossy exports can affect quality, and embedded metadata is not preserved.
References: MDN CanvasRenderingContext2D drawImage().