vue-cropper

<template>
  <div class="hello">
    <div style="width:100%;height:100%;">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :fixedBox="option.fixedBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :centerBox="option.centerBox"
        :high="option.high"
        :infoTrue="option.infoTrue"
        :enlarge="option.enlarge"
        @realTime="realTime"
        @imgLoad="imgLoad"
        @cropMoving="cropMoving">
      </vueCropper>
    </div>    
    <button @click="handleCropper">start cropper</button> 
  </div>
</template>
  
<script>
import { VueCropper }  from 'vue-cropper' 
export default {
  name: 'HelloWorld',
  components:{VueCropper},
  data () {
    return {
      //https://github.com/xyxiao001/vue-cropper/
      option:{
        img: 'https://bpic.588ku.com/element_water_img/18/06/12/b2887846cb19ff36a5502401ac918809.jpg',//裁剪图片的地址
        outputSize: 1,//裁剪生成图片的质量
        full: true,//输出原图比例截图 props名full
        autoCrop:false,//    是否默认生成截图框
        outputType:'jpeg || png || webp',//裁剪生成图片的格式
        canMove:true,//上传图片是否可以移动
        canMoveBox:true,//截图框能否拖动
        fixedBox:false,//固定截图框大小 不允许改变
        original:false,//上传图片按照原始比例渲染
        autoCropWidth:'200',//默认生成截图框宽度
        autoCropHeight:'200',//默认生成截图框高度
        centerBox:false,//截图框是否被限制在图片里面
        high:true,//是否按照设备的dpr 输出等比例图片
        infoTrue:false,//true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge:1,//图片根据截图框输出比例倍数
        maxImgSize:2000,//限制图片最大宽度和高度
      },
    }
  },
  methods:{
    realTime(){ },
    imgLoad(){ },
    cropMoving(){},
    handleCropper(){

    },
    handleEvent(event) {
      console.log(event.keyCode,event.ctrlKey);
      if(event.keyCode === 17 && event.ctrlKey) {
        console.log('sss');
        this.$refs.cropper.startCrop();
        event.preventDefault();
        event.returnVal = false;
        return false;
      }
    }
  },
  mounted() {
    document.addEventListener('keydown',this.handleEvent)
  }
}
</script>

<style lang="less" scoped>
.hello {
  display: flex;
  height: 100%;
}
</style>