Skip to content

Changing image source and output format together reports the old image as the new crop #41

Closed

Description

@javier-godoy

Describe the bug

If the image source and the output format change in the same server round trip, the component reports the old image's pixels as the cropped image of the new one.

The output-format effect in image-crop.tsx (lines 202-210) calls _updateCroppedImage(crop) as soon as the component re-renders. At that point the new image has not loaded yet, so image.naturalWidth/drawImage still use the previous image. Meanwhile image.src already points to the new source, so the output type is resolved from the new image's extension (resolveOutputType(..., image.src, ...), line 339). The resulting cropped-image event is accepted by the server as the crop of the new image.

Steps to reproduce

  1. Create an ImageCrop with image A and define a crop (user selection or setCrop).
  2. In a single server-side handler call setImageSrc("b.jpg") and setOutputMimeType("image/jpeg") (or setOutputQuality(...)).
  3. Call getCroppedImageDataUri() after the round trip: it holds a crop of image A, encoded as JPEG.

Expected behavior

No crop should be reported for the new image until it has loaded; then it should be re-cropped from the new image's pixels.

Possible fix

Don't re-encode until the new image has loaded, and/or tag each cropped-image event with the source of the image that was actually encoded (recorded in onLoad, not read from image.src, which already points to the new source) so the server can ignore events for a different image.

This is related to #39, which resets the cropped image when the source changes but doesn't cover this case.

Activity

  1. self-assigned this
    on Oct 16, 2026
  2. moved this from Inbox (needs triage) to To Do in Flowing Code Addonson Oct 16, 2026
  3. moved this from To Do to In Progress in Flowing Code Addonson Oct 21, 2026
  4. added a commit that references this issue on Oct 27, 2026
    7e31a1c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions