vue裁剪图片功能-拖拉功能

<template>
  <div class="index">

    <el-dialog class="dialog" :visible.sync="dialogStatus">
        <div class="info">
          <div class="fl">
            <p class="p1">自动生成截图框 固定比例 w : h => 4 : 3</p>
            <div class="test">
              <vueCropper ref="cropper2" :img="example2.img " :outputSize="example2.size" :outputType="example2.outputType"
                :info="example2.info" :canScale="example2.canScale" :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.autoCropWidth" :autoCropHeight="example2.autoCropHeight" :fixed="example2.fixed"
                :fixedNumber="example2.fixedNumber" :enlarge="4"></vueCropper>
            </div>
            <label class="btn" for="upload2">上传</label>
            <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event,2)">
            <button @click="finish2()" class="btn">裁剪</button>
          </div>
          <div class="fr">
            <p class="p1">裁剪后图片展示</p>
            <div class="image">
              <img :src="example2.showimg" alt="">
            </div>
            <p class="click">

            <button class="btn">提交</button>
            </p>
          </div>
        </div>
    </el-dialog>

    <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </transition-group>
    </vuedraggable>

  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import vuedraggable from 'vuedraggable';
export default {
  name: 'index',
  data() {
    return {
      dialogStatus:true,
      model: false,
      modelSrc: '',
      crap: false,
      previews: {},
      form: {
        head: ''
      },
      example2: {
        //img的路径自行修改
        img: '',// 上传的图片
        showimg:'',// 裁剪后的图片
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 300,
        autoCropHeight: 250,
        fixed: true,
        // 真实的输出宽高
        infoTrue: true,
        fixedNumber: [4, 3]
      },
      downImg: '#',
      list: [1,2,34,4,54,5]
    }
  },
  components:{
    VueCropper,vuedraggable
  },
  watch:{
    list:function(){
      console.log(this.list)
    }
  },
  created() {
    document.addEventListener('scroll', this.scroll, false)
  },
  mounted() {
    
  },
  methods: {
    //点击裁剪，这一步是可以拿到处理后的地址
      finish2() {
        this.$refs.cropper2.getCropData((data) => {
          this.modelSrc = data
          this.model = false;
          //裁剪后的图片显示
          this.example2.showimg = this.modelSrc;
          // this.toBlob(data)
          // console.log(data)
          // console.log(this.toBlob(data))
        })
      },
      uploadImg(e, num) {
        //上传图片
        this.example2.img = ''
        var file = e.target.files[0]
        if(!file) return
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
          return false
        }
        var reader = new FileReader()
        reader.onload = (e) => {
          let data
          data = e.target.result
          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)
        // 转化为blobcs
        reader.readAsArrayBuffer(file)
      }
  }
}
</script>
<style lang="scss" scoped>

  .dialog{
    .el-dialog{width: 800px!important;}
    .info{
      overflow: hidden;
      .p1{font-size: 14px;line-height: 3;color: #666;}
      .fl{
        width: 400px;float: left;
      }
      .fr{
        width: 300px;float: left;margin-left: 40px    ;
        .image{
          width: 300px;
          height: 190px;border: #dcdcdc solid 1px;text-align: center;padding-top: 10px;
          img{width: 270px;height: 180px;}
        }
        .click{
          text-align: center;
        }
      }
    }
    
  }
 
  .content {
    margin: auto;
    max-width: 585px;
    margin-bottom: 100px;
  }
 
  .test-button {
    display: flex;
    flex-wrap: wrap;
  }
 
  .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
  }
 
  .des {
    line-height: 30px;
  }
 
  code.language-html {
    padding: 10px 20px;
    margin: 10px 0px;
    display: block;
    background-color: #333;
    color: #fff;
    overflow-x: auto;
    font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
    border-radius: 5px;
    white-space: pre;
  }
 
  .show-info {
    margin-bottom: 50px;
    .image{
      width: 200px;
    }
  }

  .test {
    height: 285px;
  }

  .c-item {
    display: block;
    padding: 10px 0;
    user-select: none;
  }
 .wrapper {
  width: 1000px;margin: auto;
}
.item{
  width: 300px;float: left;
  height: 50px;font-size: 14px;text-align: center;
  background-color: #42b983;margin: 10px;
  color: #ffffff;
}
</style>