Skip to content

Configured px crops don't map deterministically to the output size #33

Description

@paodb

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status
In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions