Skip to content

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

@paodb

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Inbox (needs triage)

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions