cropperjs裁剪后图片变大的问题

在图片裁剪之后,100kb的图片变成1.2mb,生成blob对象的时候默认是生成高质量的png&＃xff0c;这里把png改成jpeg就可以了(我试了一下jpg也不行)

this.cropper.getCroppedCanvas().toBlob(async (blob) &＃61;> {try {const formData &＃61; new FormData()const nameImg &＃61; new Date().getTime() &＃43; &＃39;.jpeg?s=#39;formData.append(&＃39;file&＃39;, blob, nameImg)console.log(formData)await uploadAvatar(formData)this.$emit(&＃39;update-avatar&＃39;)this.$emit(&＃39;close&＃39;)this.$toast(&＃39;Sửa đổi thành công!&＃39;)} catch (error) {this.$emit(&＃39;close&＃39;)this.$toast(&＃39;Chỉnh sửa thất bại&＃39;)}}, &＃39;image/jpeg&＃39;)

 后来改了过后发现图片还是比原先大了近一倍,后来发现没指定画布的大小,添加过后返回的图片大小明显比原图还小了不少

const image &＃61; this.$refs.imgthis.cropper &＃61; new Cropper(image, {viewMode: 1,dragMode: &＃39;move&＃39;,aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false,width: 236, // 输出画布的目标宽度height: 236, // 输出画布的目标高度。minWidth: 236, // 输出画布的最小目标宽度&＃xff0c;默认值为0。minHeight: 236, // 输出画布的最小目标高度&＃xff0c;默认值为0。maxWidth: 236, // 输出画布的最大目标宽度&＃xff0c;默认值为Infinity(无穷大)。maxHeight: 236 // 输出画布的最大目标高度&＃xff0c;默认值为Infinity(无穷大)。})