Agontuk / vue-cropperjs

A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
MIT License
936 stars 224 forks source link

Maximum Call Stack exceed on cropping image #124

Open muhammadnabeelmehmood opened 1 year ago

muhammadnabeelmehmood commented 1 year ago

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.

muhammadnabeelmehmood commented 1 year ago

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

AndrewSithole commented 1 year ago

Also getting this error