图片裁剪（cropperjs）

一、img预览框拿到blob图片信息

这里只有主要代码

<input type="file" hidden ref="inputFile" @change="updateImg" />

const file = this.$refs.inputFile.files[0]
// 拿到blob图片信息
this.img = window.URL.createObjectURL(file)

二、cropperjs使用

1、安装cropperjs

npm install cropperjs

2、引入css、js

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

3、在mounted中初始化

const image = this.$refs.img
const cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop (event) {
        console.log(event.detail.x)
        console.log(event.detail.y)
        console.log(event.detail.width)
        console.log(event.detail.height)
        console.log(event.detail.rotate)
        console.log(event.detail.scaleX)
        console.log(event.detail.scaleY)
    }
})
console.log(cropper)

4、配置cropperjs

const cropper = new Cropper(image, {
    viewMode: 1, // 只能在裁剪的图片范围内移动
    dragMode: 'move', // 画布和图片都可以移动
    aspectRatio: 1, // 裁剪区默认正方形
    autoCropArea: 1, // 自动调整裁剪图片
    cropBoxMovable: false, // 禁止裁剪区移动
    cropBoxResizable: false, // 禁止裁剪区缩放
    background: false, // 关闭默认背景
    movable: true
})

5、裁切的两种方式

5.1 服务端

（1）获取cropper实例

this.cropper = new Cropper(image, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false // 关闭默认背景
    })

(2) 给确定注册点击事件，在事件函数中获取参数

<span @click="confirm">完成</span>

confirm () {
	// this.cropper.getData()获取的数据传给后端，后端实现裁剪
    console.log(this.cropper.getData())
}

5.2 客户端

confirm () {
	  // 前端裁剪好，将裁剪好的blob图片直接传给后端
     this.cropper.getCroppedCanvas().toBlob(async blob => {
        // 创建formData数据
        const formData = new FormData()
        formData.append('photo', blob)
        // 发请求
        const res = await updateUserAvatar(formData)
    }