vue cropper 图片截图

一、图片生成截图，获取坐标和截图的base,blob信息
1、第一步，上传图片

<el-form-item class="uploadImg">
            <el-upload class="avatar-uploader"
                       :action='自己的上传图片接口（例:http://www.bai.com）'
                       :show-file-list="false"
                       accept="image/jpeg,image/png,image/bmp"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
              <i v-if="!form.imageUrl" class="el-icon-plus avatar-uploader-icon">添加照片</i>
            </el-upload>
          </el-form-item>

2、第二步：定义图片，参数

			组件内使用
			import { VueCropper }  from 'vue-cropper' 
			components: {
			  VueCropper,
			},
			
			main.js里面使用
			import VueCropper from 'vue-cropper' 
			
			Vue.use(VueCropper)
			
			cdn方式使用
			<script src="vuecropper.js"></script>
			Vue.use(window['vue-cropper'])
			
			nuxt 使用方式
			if(process.browser) {
			  vueCropper = require('vue-cropper')
			  Vue.use(vueCropper.default)
			}
    // 数据绑定
    data() {
      return {
           option:{
          "img": "http://assets.jq22.com/plugin/2016-08-30-08-08-49.png",
          "outputType": "jpeg || png || webp",
          size: 1,
          full: true,
          canMove: true,
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 200,
          autoCropHeight: 150,
          fixedNumber:[2,2],
          centerBox: false,
          infoTrue:true,
          high: true,
        },
        modelSrcList：[]
		}
    },
   
        <div style=" width: 275px; height:192px;margin: 30px auto;border: 1px solid #ccc;margin-bottom: 10px">
            <vueCropper
              ref="cropper"
              img="http://localhost:8088/static/img/bgBig.59aa652.png"
              :outputSize="option.size"
              :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"
            ></vueCropper>
          </div>
           <el-button size=" big" type="primary" @click="startCrop" >截图</el-button>
          <span style="color: #333;padding-left: 30px" v-if="form.imageUrl">截图特征(可截图6张)：</span>
          <div style="flex-wrap: wrap" class="rowFlex">
            <div class="show-preview" v-for="(item,index) in modelSrcList" :key="index">
              <img :src="item" style="width: 100%;height: 100%">
              <div class="clearImg" @click="handleClearImg(index)">x</div>
            </div>
          </div>
           methods: {
                 beforeAvatarUpload(){},
     			 handleAvatarSuccess(res, file) { },
                 startCrop() {
				        // start
				        this.num=this.num+1
				        if(this.modelSrcList.length>5){
				          this.$notify({
				            type:'warning',
				            title: '警告',
				            message: '最多只能截6张图'
				          })
				          return
				        }
				        this.crap = true
				        this.$refs.cropper.getCropAxis()
				        console.log("this.$refs.cropper.getCropAxis()",this.$refs.cropper.getCropAxis())
				        // 输出
				        this.$refs.cropper.getCropBlob((data) => {
				          var img = window.URL.createObjectURL(data)
				          this.model = true
				          this.modelSrcList.push(img)
				        })
		      },
		          handleClearImg(index){
			       	 this.modelSrcList.splice(index,1)
			      },
           }
           <style lang="scss" rel="stylesheet/scss" scope>
           .rowFlex{
			  display: flex;
			  flex-direction: row;
			  justify-content: flex-start;
			  align-items: center;
			}
			//截图公共样式
			.cropper-box-canvas{
			  width: 275px;
			  height: 192px;
			}
			.show-preview{
			  width: 79px;
			  height: 63px;
			  background: #ccc;
			  margin: 5px;
			  position: relative;
			}
			.clearImg{
			  color: red;
			  font-size: 15px;
			  right: -6px;
			  top: -8px;
			  line-height: 13px;
			  position: absolute;
			  text-align: center;
			  background: #ddd;
			  border-radius: 50%;
			  height: 15px;
			  width: 15px;
			  cursor: pointer;
			}
           </style>
![效果图如下](https://img-blog.csdnimg.cn/20190614112916819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTE5NzA1,size_16,color_FFFFFF,t_70)
在这里插入图片描述
踩坑：一定要在vueCroper外层包一个div，并且定义宽高。
参考链接：https://www.npmjs.com/package/vue-cropper/v/0.4.7