Spun off from the review of #32.
Context
After #32 the cropped image is exported at the image's natural resolution.
However, a configured/programmatic crop in px (e.g.
setCrop(new Crop("px", 0, 0, 500, 500)) or setCropMinWidth(500)) does not map
deterministically to the output size.
Problem
A px crop is interpreted by react-image-crop in rendered (on-screen)
pixels. The component sets up the initial crop in onImageLoad using the
displayed dimensions and keeps the crop state in px, with a
ResizeObserver/resizeCrop workaround to rescale it. As a result, the output
of a configured px crop depends on whether the image was already scaled when
the crop was established (render/resize timing): on a 2000×1000 image shown at
1500×750, a configured 500×500 crop can export at either ~500×500 or ~667×667.
Proposed direction (aligned with react-image-crop)
- Store the crop state as
% (resolution-independent), per the upstream
recommendation (onChange → setCrop(percentCrop)).
- Use natural dimensions (
naturalWidth/naturalHeight) in onImageLoad for
makeAspectCrop/centerCrop, as in the upstream example.
- This makes the output deterministic (
% × natural) regardless of scaling
timing, and likely allows removing the resizeCrop/ResizeObserver workaround.
- Decide/document the semantics of
setCropMinWidth/Height (rendered px per
react-image-crop) and whether to expose them in output pixels.
Spun off from the review of #32.
Context
After #32 the cropped image is exported at the image's natural resolution.
However, a configured/programmatic crop in
px(e.g.setCrop(new Crop("px", 0, 0, 500, 500))orsetCropMinWidth(500)) does not mapdeterministically to the output size.
Problem
A
pxcrop is interpreted by react-image-crop in rendered (on-screen)pixels. The component sets up the initial crop in
onImageLoadusing thedisplayed dimensions and keeps the crop state in
px, with aResizeObserver/resizeCropworkaround to rescale it. As a result, the outputof a configured
pxcrop depends on whether the image was already scaled whenthe crop was established (render/resize timing): on a 2000×1000 image shown at
1500×750, a configured 500×500 crop can export at either ~500×500 or ~667×667.
Proposed direction (aligned with react-image-crop)
%(resolution-independent), per the upstreamrecommendation (
onChange → setCrop(percentCrop)).naturalWidth/naturalHeight) inonImageLoadformakeAspectCrop/centerCrop, as in the upstream example.% × natural) regardless of scalingtiming, and likely allows removing the
resizeCrop/ResizeObserverworkaround.setCropMinWidth/Height(rendered px perreact-image-crop) and whether to expose them in output pixels.