github:https://github.com/xyxiao001/vue-cropper
    1、安装

    1. cnpm install vue-cropper

    2、引入

    1. import { VueCropper } from 'vue-cropper'
    3.  components: {
    4.    VueCropper,
    5.  },

    3、使用

    1. <div class="btn" @click="openCutImg">裁剪</div>
    2. <el-dialog title="图片剪裁" :visible.sync="cutImgDialogVisible" append-to-body>
    3.   <div class="cropper-content">
    4.     <div class="cropper" style="text-align:center">
    5.       <vue-cropper
    6.         ref="cropper"
    7.         :img="option.img"
    8.         :outputSize="option.size"
    9.         :outputType="option.outputType"
    10.         :info="true"
    11.         :full="option.full"
    12.         :canMove="option.canMove"
    13.         :canMoveBox="option.canMoveBox"
    14.         :original="option.original"
    15.         :autoCrop="option.autoCrop"
    16.         :fixed="option.fixed"
    17.         :fixedNumber="option.fixedNumber"
    18.         :centerBox="option.centerBox"
    19.         :infoTrue="option.infoTrue"
    20.         :fixedBox="option.fixedBox"
    21.         ></vue-cropper>
    22.     </div>
    23.   </div>
    24.   <div slot="footer" class="dialog-footer">
    25.     <el-button @click="cutImgDialogVisible = false">取 消</el-button>
    26.       <el-button type="primary" @click="finishCutImg" :loading="cutImgloading">确认</el-button>
    27.   </div>
    28. </el-dialog>
    30. // 裁剪组件的基础配置option
    31. option: {
    32.   img: '', // 裁剪图片的地址
    33.   info: true, // 裁剪框的大小信息
    34.   outputSize: 0.8, // 裁剪生成图片的质量
    35.   outputType: 'jpeg', // 裁剪生成图片的格式
    36.   canScale: false, // 图片是否允许滚轮缩放
    37.   autoCrop: true, // 是否默认生成截图框
    38.   // autoCropWidth: 300, // 默认生成截图框宽度
    39.   // autoCropHeight: 200, // 默认生成截图框高度
    40.   fixedBox: false, // 固定截图框大小 不允许改变
    41.   fixed: false, // 是否开启截图框宽高固定比例
    42.   fixedNumber: [7, 5], // 截图框的宽高比例
    43.   full: true, // 是否输出原图比例的截图
    44.   canMoveBox: true, // 截图框能否拖动
    45.   original: false, // 上传图片按照原始比例渲染
    46.   centerBox: true, // 截图框是否被限制在图片里面
    47.   infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    48. },
    49. img_url:"",
    50. cutImgDialogVisible: false,
    51. cutImgloading:false,
    54. openCutImg(){
    55.   if (this.img_url) {
    56.     this.option.img = this.img_url
    57.     this.cutImgDialogVisible = true
    58.   }
    59.   this.option.img = this.img_url
    60.   this.cutImgDialogVisible = true
    61. },
    62. finishCutImg(){
    63.   this.$refs.cropper.getCropBlob((data) => {
    64.     console.log(data);
    65.     this.cutImgloading = true
    66.      //上传阿里云服务器
    67.     this.uploadOss(data,'img_url')
    68.     this.cutImgloading=false
    69.     this.cutImgDialogVisible = false
    70.   })
    71. },