Circular Crop Gallery Block for React

Each entry in PICTURES has an id, a label, a description and a src. Replace src with your image's address (or a data URI), keep the description as its alt text, and the cropper and the three previews both use it. Keep the picture square, or change the cropper's aspect-square and the readout, which assumes a square one.

Tab to the circle, then the arrow keys nudge it (hold Shift for bigger steps) and plus and minus zoom the picture. The Zoom out and Zoom in buttons do the same by pressing, and Reset puts everything back. The cropper's selection announces its position and how to use it for a screen reader.

The cropper sets inline styles on the picture and on the circle as you move them. The block watches those styles, measures the circle against the picture on the next frame and turns the result into three numbers: where the crop starts and how wide it is, as shares of the picture. Each preview is the same picture, scaled and shifted so that crop fills its circle. Nothing is read back from a canvas, so it works with any picture.

This demo only previews. To produce a file, read the crop from the cropper's own API (its getCroppedImage returns a blob or a data URL) in your own handler, and upload that.

The cropper takes an image address, and a data URI keeps the block self-contained: no files to host and no network request. Its fills are fixed greys rather than theme tokens, because an image loaded this way cannot see the page's custom properties.

The cropper sits above the previews, which become a row of three circles with their sizes under them. Dragging works with a finger and pinching zooms; the Zoom buttons are there when pinching is awkward.