Agontuk/vue-cropperjs

Maximum Call Stack exceed on cropping image

muhammadnabeelmehmood opened this issue · 2 comments

When a user uploads an image, I convert it to base64 and then crop it.

Upload Image Code

const reader = new FileReader();
reader.onload = (event) => {
 this.uploadImage = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);

Vue Cropper Component

<vue-cropper
                      ref="cropper"
                      :auto-crop="true"
                      :data="data"
                      :min-crop-box-height="150"
                      :min-crop-box-width="150"
                      :src="uploadImage"
                      :view-mode="3"
                      :zoom-on-wheel="false"
                      @crop="fixDimensionCrop"
                    />

On this function I'm getting an error maximum call stack exceed.

fixDimensionCrop(event) {
          
            let width = event.detail.width;
            let height = event.detail.height;

            if (
                width < this.minCroppedWidth
          || height < this.minCroppedHeight
          || width > this.maxCroppedWidth
          || height > this.maxCroppedHeight
            ) {
                this.$refs.cropper.setData({
                    width: Math.max(this.minCroppedWidth, Math.min(this.maxCroppedWidth, width)),
                    height: Math.max(this.minCroppedHeight, Math.min(this.maxCroppedHeight, height)),
                });
               
            }
        },

fixDimensionCrop function is being called when user resize crop canvas.

@Agontuk Kindly have a look at it.

I get this error while using base64, but everything is good when I use the local directory image path.

Also getting this error