前端做上传头像等裁切图片的好朋友 Cropper.js

现在不管pc端还是移动端的网页，只要有登录功能，大多会有编辑个人信息的功能，那样就避免不了上传用户个人头像。既然要上传头像，但凡正规一些的网页那肯定会需要裁切图片，不会让你直接选择一张图就放上去，那样极度影响用户体验，不利于样式的统一渲染，影响美观。
我就举vue项目为例，去使用Cropper.js吧

• 首先就是下载

npm install cropperjs

• 它要求图片必须有根元素

<div>
  <img id="image" src="picture.jpg" ref="imgRef">
</div>

• 因为避免图片溢出，需要给图片设置成块级元素并且设置最大宽度,通常是设置成和父级元素一样宽

img {
  display: block;

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

• 然后就是在需要的vue组件里引用，vue获取dom元素的话，可以写在mounted生命周期里面，其中new Cropper里面写的就是他的配置，你们可以先用这个配置测试下效果哦

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

const image = this.$refs.imgRef
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)
  },
})

• 这个是我个人常用的配置，可以处理常用的裁切图片的需求，有需要的可以直接用哦

viewMode: 1,
dragMode: 'move',
aspectRatio: 1,
autoCropArea: 1,
cropBoxMovable: false,
cropBoxResizable: false,
background: false,
movable: true

• 保存图片并更新数据，可以打印出来看下数据

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数。

console.log(this.cropper.getData())

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

this.cropper.getCroppedCanvas().toBlob(blob => {
    console.log(blob)
})

通常上传文件或者图片，接口要求 Content-Type 是 multipart/form-data，则你必须传递 FormData 对象 axios 检测到你传的formdata对象 会自动把 content-type转换成 multipart/form-data

const formData = new FormData()
formData.append('photo', blob)
然后把这个 formData 对象传给后台

• 想配置更多的功能，可以前往官方文档

https://github.com/fengyuanchen/cropperjs

以上~~