0.0.2 • Published 4 years ago
安装
npm install lks-cropper
自定义裁剪工具仿微信版,目前不支持旋转功能
全局引用--main.js里面使用
import lksCropper from 'lks-cropper'
import 'lks-cropper/lib/lksCropper.css';
Vue.use(Lcropper)
import { lksCropper } from 'lks-cropper'
import 'lks-cropper/lib/Lcropper.css';
components: {
lksCropper
},
<lksCropper v-if="cropperState"
:cropperImgUrl="cropperImgUrl"
@cropperCancel="cropperCancel"
@cropperConfirm="cropperConfirm">
cropperImgUrl: "", //本地图片的地址一般取base64字符串
cropperState: false, //图片裁剪工具状态
//裁剪工具隐藏
cropperCancel() {
//裁剪工具隐藏
this.cropperState = false;
},
//裁剪工具隐藏
cropperConfirm(urlStr) {
//裁剪工具隐藏
this.cropperCancel();
console.log(urlStr.length);
if (urlStr.length > 1.8 1024 1024) {
//图片压缩处理
this.imgCompressFun(urlStr, 1.8 1024 1024, (str) => {
// console.log(str.length);
this.applyImageUrl = str; //报名上传的裁剪后base64图片
});
} else {
this.applyImageUrl = urlStr; //报名上传的裁剪后base64图片
}
},