最近在做H5端,上传图片时需要裁剪功能,网上找了一圈,先附上链接
http://www.voidcc.com/project/vue-img-cropper
使用过程:
1)、安装裁剪所需的依赖
npm install exif-js -S
npm install vue-img-cropper -D
2)使用
import VueImgCropper from "vue-img-cropper" components: { VueImgCropper } <p @click="showCutImg">图片裁剪测试</p> <img :src="imgSrc" alt="" style="width:200px;height:200px;"> <vue-img-cropper ref="cropper" :height="200" :width="400" :maxScale="3" :compressionRatio="0.8" @cutImg="CutImg" > </vue-img-cropper> data:{ return:{ imgSrc:‘‘ } } methods: { CutImg(file){ // 确认裁剪后的按钮 console.log(file,‘file‘) this.imgSrc = file // 得到的是裁剪后的base64的图片 }, showCutImg(){ // 调取手机选择图片功能 this.$refs.cropper.getImg() }, }
效果: