vue项目图片裁剪上传——vue-cropper的使用，裁剪后上传头像

npm地址：https://www.npmjs.com/package/vue-cropper

github地址：https://github.com/xyxiao001/vue-cropper

在线demo：http://github.xyxiao.cn/vue-cropper/example/

vue2-demo：https://codepen.io/xyxiao001/pen/wxwKGz

vue3-demo：https://codepen.io/xyxiao001/pen/yLooYKg

1、基本使用

1、安装

npm install vue-cropper
npm install vue-cropper --save-dev
yarn add vue-cropper

实例1

封装upload-cropper组件

新建upload-cropper

实例2

test.vue：

其中，js/api.js文件是配置的接口地址

1、打开页面效果

2、点击选择图片按钮，选择完本地图片后的效果

选择完图片后，就可以对图片进行放大，缩小以及旋转等，并且可以移动选中框，选择上传图片的任意部分

3、点击上传头像按钮，即可调用上传头像的接口，把头像上传到文件服务器；

4、此时，图片便已上传成功了，查看图片服务器指定的目录，即可查看到图片已经在服务器上了

实例3-完整版

1、安装

npm install vue-cropper --save

2、页面引入

import { VueCropper } from 'vue-cropper'

3、申明组件

components: {VueCropper,},

4、完整代码

实例4

1、安装

npm install vue-cropper

2、使用

1.main.js文件引入

import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)

2.封装

3.组件调用

 this.$refs.iscropper.showModal({img: img, // 裁剪图片的地址outputSize: 0.8, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式info: true, // 裁剪框的大小信息canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: 375, // 默认生成截图框宽度autoCropHeight: 245, // 默认生成截图框高度fixedNumber: [1, 1], // 截图框的宽高比例fixedBox: false, // 固定截图框大小 不允许改变fixed: false, // 是否开启截图框宽高固定比例canMove: true, // 上传图片是否可以移动canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高full: true, // 是否输出原图比例的截图enlarge: '1', // 图片根据截图框输出比例倍数mode: 'contain', // 图片默认渲染方式success: res => {this.unimgurl = res.imgthis.imageUrl = URL.createObjectURL(res.img)}})

省略

 this.$refs.iscropper.showModal({img: img, // 裁剪图片的地址autoCropWidth: 375, // 默认生成截图框宽度autoCropHeight: 245, // 默认生成截图框高度success: res => {this.unimgurl = res.imgthis.imageUrl = URL.createObjectURL(res.img)}})