lks-cropper

自定义裁剪工具仿微信版，目前不支持旋转功能

Usage no npm install needed!

<script type="module">
  import lksCropper from 'https://cdn.skypack.dev/lks-cropper';
</script>

README

安装

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图片

}

},