The image does not return to previous state after shrinking and expanding viewport again in Cropper.js

Officially Cropper.JS supports the resizing of the window (even by default), however when expand the viewport after shrinking, more than half of image is moving outside of bounds of initial canvas. Unfortunately, the images uploader has not allowed me to upload the GIF for the multiple reasons, so I’ll upload some frames instead:

Before viewport shrinking:

(Image by freepik)

After viewport shrinking:

After viewport expanding:

I am not sure this is the bug of Cropper.js, maybe it is just wrong configuration. My configuration is:

new CropperJS(
  this.imageElement,
  {
    aspectRatio: 1,
    viewMode: 1,
    responsive: true, // it is "true" by default but...
    movable: false,
    rotatable: false,
    scalable: false,
    zoomable: false,
    minCropBoxWidth: 128,
    minContainerHeight: 128,
    modal: false,
    highlight: false,
    background: false
  }
);

You need to sign in to view this answers

Related Post