移动端图片剪裁工具cropperjs

第三方依赖：cropperjs
适用于原生js，jquery，vue及其他框架。
下载：

npm install cropperjs

引入css及js：

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

初始化：（必须在mounted中）

  mounted() {
    // 获取图片
    const image = this.$refs.img
    // 获取cropper实例
    const cropper = new Cropper(image, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false, // 关闭默认背景
      // crop可省略
      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)
      }
    })
  },

结构：

<div class="photo">
    <img :src="img" ref="img" />
</div>

样式：

  img {
    max-width: 100%;
    display: block;
  }

• 注意：img要包裹在div中，并且display:block，设置最小宽度为了使图片能够在页面完全展示。
• 图片剪裁通常结合popup弹出层使用，准备一个弹层和一张图片即可。

剪裁完毕：

• 客户端剪裁使用getCroppedCanvas()方法，服务器端剪裁使用getData()方法。

confirm() {
      this.cropper.getCroppedCanvas().toBlob(blob => {
        console.log(blob)
        // blob为剪裁完成后的图片地址
      })
    }