图片识别vue-cropper

 imageCut.js子组件

<template>
  <div class='imageCut' v-if='imageCutshow'>
    <van-loading color="#1989fa" class="loading" v-show="loadingshow" />
    <div class="info-item">
      <div style="margin-top:15px;margin-left:15px;">
      <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="+" title="放大" @click="changeScale(1)">
      <!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="-" title="缩小" @click="changeScale(-1)"> -->
      <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↺" title="左旋转" @click="rotateLeft">
      <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↻" title="右旋转" @click="rotateRight">
      <!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↓" title="下载" @click="down('blob')"> -->
     <!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↑" title="下载" @click="down('blob')"> -->
      </div>
      <div class="line">
        <div class="cropper-content">
          <div class="cropper">
            <vue-cropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixedBox="option.fixedBox"
              @realTime="realTime"
              @imgLoad="imgLoad"
            ></vue-cropper>
          </div>
          <div class="addrssbtn">
              <div class="itembtn"  @click="cancleUp()">取消</div>
              <div class="itembtn itembtn-active" style='border-left: 1px solid #ccc;' @click="finish('base64')">确定</div>
          </div>
       
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        fileUrl: {
            type: String,
        },
        imageCutshow:{
            Boolean
        }
    },
    watch: {
        fileUrl(val) {
            // debugger;
            // if (val.length > 0) {
            //     lrz(val, {width: 1200})
            //         .then(rst=> { 
            //             console.log('rst',rst.file.size/(1024*1024)+'M');
            //             this.show = true;
            this.option.img = val;
            this.imageCutshow=true;
            //         })
            //         .catch(err=>{
            //             this.false;
            //             this.Global.fetch.toast('压缩图片失败,请重新上传','none');
            //         });
            // }
        },
    },
    data() {
        return {
            loadingshow:false,
            // imageCutshow:false,
            headImg:'',
            //剪切图片上传
            crap: false,
            // previews: {},
            option: {
                img: '',
                outputSize:1, //剪切后的图片质量（0.1-1）
                full: false,//输出原图比例截图 props名full
                outputType: 'png',//裁剪生成图片的格式
                canMove: true, 
                original: false, 
                canMoveBox: true, //截图框能否拖动
                autoCrop: true, //是否默认生成截图框(只有自动截图开启 宽度高度才生效)
                autoCropWidth: 300, 
                autoCropHeight: 200, 
                fixedBox: false 
            }, 
            fileName:'',  //本机文件地址
            downImg: '#',
            imgFile:'',
            uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名）
        };
    }, 
    methods: { 
        //放大/缩小
        changeScale(num) { 
            console.log('changeScale');
            num = num || 1; 
            this.$refs.cropper.changeScale(num); 
        }, 
        //坐旋转
        rotateLeft() { 
            console.log('rotateLeft');
            this.$refs.cropper.rotateLeft(); 
        }, 
        //右旋转
        rotateRight() { 
            console.log('rotateRight');
            this.$refs.cropper.rotateRight(); 
        }, 
        //上传图片（点击上传按钮）
        finish(type) {
            // debugger;
            console.log('finish');
            let _this = this;
            let formData = new FormData();
            // 输出 
            if (type === 'blob') { 
                this.$refs.cropper.getCropBlob((data) => { 
                    let img = window.URL.createObjectURL(data); 
                  
                    this.upServise(img);
                    
                    // this.$emit('confirm', data,loading);
                });
            } else { 
                this.$refs.cropper.getCropData((data) => { 
                 
                    // this.model = true; 
                    // this.modelSrc = data; 
                    this.upServise(data);
                    // this.$emit('confirm', data);
                }); 
            } 
        },
        // 上传接口
        upServise(img){
            this.loadingshow=true;
            this.$api.hshlImageDiscern({
                'image': img
            }).then((res) => {
                this.loadingshow=false;
                if(res.data.code===0){
                    this.$emit('confirm', res.data.data);
                }else{
                    // this.$emit('confirm', data);
                }
                this.$emit('update:imageCutshow', false);
            });
        },
        // 实时预览函数 
        realTime(data) { 
            console.log('realTime');
            this.previews = data; 
        }, 
        //下载图片
        down(type) { 
            console.log('down');
            let aLink = document.createElement('a'); 
            aLink.download = 'author-img'; 
            if (type === 'blob') { 
                this.$refs.cropper.getCropBlob((data) => { 
                    this.downImg = window.URL.createObjectURL(data);
                    aLink.href = window.URL.createObjectURL(data); 
                    aLink.click(); 
                }); 
            } else { 
                this.$refs.cropper.getCropData((data) => { 
                    this.downImg = data;
                    aLink.href = data; 
                    aLink.click(); 
                }); 
            } 
        }, 
        //选择本地图片
        uploadImg(e, num) { 
            console.log('uploadImg');
            let _this = this;
            //上传图片 
            let file = e.target.files[0]; 
            _this.fileName = file.name;
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { 
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种'); 
                return false; 
            } 
            let reader = new FileReader(); 
            reader.onload =(e) => { 
                let data; 
                if (typeof e.target.result === 'object') { 
                    // 把Array Buffer转化为blob 如果是base64不需要 
                    data = window.URL.createObjectURL(new Blob([e.target.result])); 
                } 
                else { 
                    data = e.target.result; 
                }
                if (num === 1) { 
                    _this.option.img = data; 
                } else if (num === 2) { 
                    _this.example2.img = data; 
                } 
            }; 
            // 转化为base64 
            // reader.readAsDataURL(file) 
            // 转化为blob 
            reader.readAsArrayBuffer(file);
        
        }, 
        cancleUp(){
            this.$emit('update:imageCutshow', false);
        },
        imgLoad(msg) { 
            console.log('imgLoad');
            console.log(msg); 
        }
    }, 
    
};
</script>

<style lang="scss" scoped>
.imageCut{
  width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left:0;
    z-index:200;
    background: rgba(0, 0, 0, 1);
        .loading{
                        position: relative;
                        left:50%;
                        top:45%;
                        z-index: 9999;
                    }
         .van-icon{
          font-size: 30px;
          color:#fff;
          position: absolute;
          left: 50%;
          bottom: 120px;
          transform: translateX(-50%);
      }
  .info {
    width: 720px;
    margin: 0 auto;
    .oper-dv {
      height:20px;
      text-align:right;
      margin-right:100px;
      a {
        font-weight: 500;
        &:last-child {
          margin-left: 30px;
        }
      }
    }
    .info-item {
      margin-top: 15px;
      label {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
      .sel-img-dv {
        position: relative;
        .sel-file {
          position: absolute;
          width: 90px;
          height: 30px;
          opacity: 0;
          cursor: pointer;
          z-index: 2;
        }
        .sel-btn {
          position: absolute;
          cursor: pointer;
          z-index: 1;
        }
      }
    }
  }

  .cropper-content{
    // display: flex;
    // display: -webkit-flex;
    // justify-content: flex-end;
    // -webkit-justify-content: flex-end;
    .cropper{
      width: 100%;
      height: 500px;
        // margin: 30px auto;
        .vue-cropper{
            background-image: none;
      }
    }
    .bottombtn{
       width: 100%;
          // background-color: #;
          height: 60px;
          position: fixed;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          .items{
              margin: 7px 10px;
          }
    }
      .addrssbtn{
          width: 100%;
          background-color: #fff;
          height: 60px;
          position: fixed;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          .itembtn{
              margin: 7px 10px;
              height: 46px;
              width: 45%;
              line-height: 46px;
              text-align: center;
              font-size: 16px;
              // border-left: 1px solid #ccc;
              color: #000;
          }
          .itembtn-active{
              // background-color: royalblue;
              color: #0068B7;
          }
      }
                

    .show-preview{
      // flex: 1;
      // -webkit-flex: 1;
      // display: flex;
      // display: -webkit-flex;
      // justify-content: center;
      // -webkit-justify-content: center;
      .preview{
        overflow: hidden;
        border-radius: 50%;
        border:1px solid #cccccc;
        background: #cccccc;
        margin-left: 40px;
      }
    }
  }
  .cropper-content .show-preview .preview {margin-left: 0;}
}
</style>

父组件

 <image-cut  :imageCutshow.sync="imageCutshow" :fileUrl='fileUrl' @confirm='confirmgetdata'></image-cut>

        confirmgetdata(data){
            if(data.content==''){
                this.$toast('暂无解析出内容，请检查图片是否准确~');
                return;
            }
            this.ucAnalysis=this.checkund(data.content);
            this.addressParams.name=this.checkund(data.name);
            this.addressParams.phone=this.checkund(data.phone);
            this.addressParams.address=this.checkund(data.address);
            this.addressParams.companyName=this.checkund(data.companyName);
            this.addressParams.provinceName=this.checkund(data.provinceName);
            this.addressParams.provinceCode=this.checkund(data.provinceCode);
            this.addressParams.cityName=this.checkund(data.cityName);
            this.addressParams.cityCode=this.checkund(data.cityCode);
            this.addressParams.districtName=this.checkund(data.districtName);
            this.addressParams.districtCode=this.checkund(data.districtCode);
            this.addressProvincecity=this.addressParams.provinceName+this.addressParams.cityName+this.addressParams.districtName;
            this.addressParams.createdBy=this.checkund(data.createdBy);
            this.shibieTips=true;
        },