vue-cropperjs
vue-cropperjs copied to clipboard
Maximum Call Stack exceed on cropping image
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