Crop Tool File Upload Block for Svelte

The cropper reports its frame in its own pixels whenever it moves; the block turns that into pixels of the 2400 by 1600 photo and shows it in the boxes. Typing a valid number goes the other way: the block works out the new frame, then seats the cropper again at that frame. A number outside its range (for example a Width over 2400) is refused with the range in the status line and the frame stays where it was.

With the lock on, the frame keeps its shape: change Width and Height follows, change Height and Width follows, and the frame is trimmed to fit the photo. The presets set the lock to a ratio; Free turns it off. Dragging a handle with a ratio set keeps the shape too, because the cropper holds it.

It is the typed original size, 3.0 MB, times the share of the photo's area the frame keeps. It is arithmetic on a typed number, not a measurement: a real file depends on the format and how busy the picture is.

Everything. The photo is a drawing passed to the cropper as an inline SVG, no file is read, and Apply crop only writes the frame into the status line. In your app pass the picked image to the cropper, read the frame in photo pixels as the block does, and crop on a canvas or on your server with those four numbers.

Yes. The frame is focusable: the arrow keys nudge it, with Shift for bigger steps, and the boxes accept typed pixels. Presets and the lock are a toggle group and a switch with names, and the status line says what changed.

The cropper's frame and handles are white. A mid-grey picture keeps them readable in light and dark themes, and the dimmed area outside the frame stays clear.