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

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.组件调用

 <x-cropper ref="iscropper">x-cropper>

 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.img
          this.imageUrl = URL.createObjectURL(res.img)
        }
      })

省略

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