最近写的一个项目用到头像上传，需要裁剪功能，缩放功能，能具备压缩上传功能，因为手机现在的像素太好了，随便一张图片的大小都上M了，而且要求手机端和pc端都可要可以使用。通过网上找到了一个合适的插件（vue-croppa）。

先上几张图片看一下效果：

点击更换头像后：

截取的大小和形状，背景颜色，base64编码，缩放级别，均可以设置更改（具体参数可以参考npm网址：https://www.npmjs.com/package/vue-croppa）

这里我加了一些按钮和样式，点击完成的时候进行图片上传到服务器。

附上代码：

组件内使引入插件和样式

import Vue from 'vue'
import Croppa from 'vue-croppa'
import 'vue-croppa/dist/vue-croppa.css'

放置组件（这里只放了一些我用到的参数，全部参数参考官网）：

<croppa
          v-model="croppa"
          :width="250"
          :height="250"
          :placeholder-font-size="16"
          :accept="'image/*'"
          prevent-white-space
          :initial-image=dataUrl
          @init="onInit"
        ></croppa>

methods:

onInit () {
      this.croppa.addClipPlugin(function (ctx, x, y, w, h) {
        ctx.beginPath()
        ctx.arc(x + w / 2, y + h / 2, w / 2, 0, 2 * Math.PI, true)
        ctx.closePath()
      })
    }

涉及到上传的问题，因为默认转化的是base64编码，但是图片过大的话，base64会很长，存取都不是很方便。还是用blob二进制存取更为合理和方便。函数如下：

 upLoad () {
      this.croppa.generateBlob(blob => {
        var formData = new FormData()
        var self = this
        formData.append('file', blob, 'png')
        this.showProgress = true
        this.axios({
          url: api.upload,
          method: 'post',
          data: formData
        }).then(res => {
          self.progressVal = 100
          self.showProgress = false
          self.showCroppa = false
          self.dataUrl = res.data.url
        })
      }, 'image/png', 0.1)
    },