使用cropper.js实现图片裁剪功能

效果：

官网：fengyuanchen.github.io/cropperjs/

编码：

<template>
  <div class="update-avatar">
    <img :src="img" ref="imgRef" />
    <div class="toolbar">
      <span @click="$emit('close')">取消</span>
      <!-- // 4. 为【完成】按钮 注册点击事件 -->
      <!-- 实时预览 -->
      <div class="view"></div>
    </div>
  </div>
</template>

<script>
// 1. 引入cropperjs的js文件和样式文件
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
export default {
  data() {
    return {
      img: 'https://img2.baidu.com/it/u=182878036,307711730&fm=253&fmt=auto&app=120&f=JPEG?w=724&h=439',
      src: '',
      cropper: null
    };
  },
  mounted() {
    this.cropperInit()
  },

  methods: {
    cropperInit() {
      // 2. 获取img标签
      const image = this.$refs.imgRef;
      // 3. 配置cropperjs的参数
      this.cropper = new Cropper(image, {
        //   viewMode: 1, // 只能在裁剪的图片范围内移动
        //   dragMode: 'move', // 画布和图片都可以移动
        aspectRatio: 1, // 裁剪区默认正方形
        //   autoCropArea: 1, // 自动调整裁剪图片
        //   cropBoxMovable: false, // 禁止裁剪区移动
        //   cropBoxResizable: false, // 禁止裁剪区缩放
        background: false, // 关闭默认背景

        //   aspectRatio: 16 / 16, //固定裁剪框的比例（横/竖）,此处16/16则固定为正方形
        //   minContainerWidth: 300, //容器最小的宽度
        //   minContainerHeight: 300, //容器最小的高度
        dragMode: 'move', //设置裁剪框为可以移动
        preview: [
          document.querySelector('.view') //设置我们需要添加实时预览的地方
          //   document.querySelector('.previewBoxRound')
        ]
      });
    },
    // 5. 点击确定事件 -- 提交截取图片
    onConfirm() {
      this.cropper.getCroppedCanvas().toBlob(async blob => {
        // 5.1 创建formData数据
        const formData = new FormData();
        formData.append('photo', blob);
        // 5.2 发起更新图片的请求
        console.log('blob', blob);
        // var str = URL.createObjectURL(blob);
        // this.src = str;
        // const { data } = await updateUserAvatar(formData);
      });
    }
  }
};
</script>
<style scoped lang="less">
.update-avatar {
  width: 170px;
  height: 100px;
  border: 1px blue solid;
  // overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .view {
    width: 100px;
    height: 100px;
    border: 1px black solid;
  }
}
.view,
.previewBoxRound {
  // box-shadow: 0 0 5px #adadad;
  width: 100px;
  height: 100px;
  // margin-top: 30px;
  overflow: hidden; /*这个超出设置为隐藏很重要，否则就会整个显示出来了*/
}
// .previewBoxRound{
//     border-radius: 50%;     /*设置为圆形*/
// }
</style>