October 24, 2024
Chicago 12, Melborne City, USA
javascript

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:

enter image description here

(Image by freepik)

After viewport shrinking:

enter image description here

After viewport expanding:

enter image description here

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

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video