图片裁剪工具vue-img-cutter

https://github.com/acccccccb/vue-img-cutter

1.安装

npm install vue-img-cutter --save-dev

2. 引入注册

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}

3.引用

 <ImgCutter
     @cutDown="cutDown"
     :boxWidth="500"
     :boxHeight="250"
     :cutWidth="405"
     :cutHeight="174"
     :tool="false"
     :sizeChange="true"
     class="inline-block"
   >
     <el-button
       slot="open"
       type="text"
       size="small"
       icon="el-icon-plus"
       class="height-50 size-14 addImg"
       >{{ !info.image ? "添加封面" : "更改封面 " }}</el-button
     >
     <el-button slot="choose" type="primary" size="small"
       >选择图片</el-button
     >
     <el-button slot="confirm" type="primary" size="small"
       >确认</el-button
     >
     <el-button slot="cancel" type="primary" plain size="small"
       >取消</el-button
     ></ImgCutter>


//裁剪后上传方法
 async cutDown(param) {
      const res = await uploadImage(param);
      if (res) {
        this.$set(this.info, "image", res.data);
        let file = { raw: param.file };
        let imageUrl = await prewImage(file);
        this.$set(this.info, "image_file", imageUrl);
      }
    },