cropper.js图片裁剪

1.安装

// An highlighted block
npm install cropperjs

2.在需要使用的组件中引入

// An highlighted block
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

3.用块元素(容器)包裹图像或画布元素 and 确保图像的大小完全适合容器

// html 结构

// An highlighted block
<div>
  <img id="image" src="picture.jpg">
</div>

// css 样式

// An highlighted block
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

4.使用最基本的代码预览效果

// document.getElementById 这是你自己的img图片dom元素，vue 一般使用this.$refs.xxx

const image = document.getElementById('image');
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);
  },
});

5.完成配置，根据自己喜好配置

// An highlighted block
const image = this.$refs.img
    const cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false,
      movable: true
    });

6.调用函数发起请求

onConfirm () {
      // 基于服务端的裁切使用 getdata 方法获取裁切参数
      // console.log(this.cropper.getData())

      // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象
      this.cropper.getCroppedCanvas().toBlob(async blob => {
        // console.log(blob);
        // 如果接口文档要求 content-type 是 application/json
        // 则传递普通 javascript 对象
        // updateUserImg({
        //   photo:blob
        // })

        // 如果接口文档要求content-type 是 multipart/form-data
        // 则我们必须传递 FormData 对象
        const formData = new FormData()
        formData.append('photo', blob)

        const { data } = await updateUserImg(formData)
        // console.log(data);
        // 关闭弹出层
        this.$emit('close')

        // 更新视图
        this.$emit('update-photo', data.data.photo)
      })