vue-cropper实现图片裁剪功能

实现代码

<template>
  <div class="upload_con">
    <el-dialog :title="title" :visible.sync="isShowUpload" @close="close" width="630px">
      <div style="text-align:left">
        <span style="margin-right:10px">图片上传</span>
        <label class="btn" for="uploads">请选择图片</label>
        <input
          type="file"
          id="uploads"
          style="position:absolute; clip:rect(0 0 0 0);"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
        >
        <span>{{fielName}}</span>
      </div>
      <div class="cut clearfix">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :full="option.full"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          @realTime="realTime"
          @imgLoad="imgLoad"
          :high="option.high"
        ></vue-cropper>
        <div
          class="show-preview"
          :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}"
        >
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
      <div class="test-button clearfix">
        <!-- <button @click="startCrop" v-if="!crap" class="btn">开始截图</button>
        <button @click="stopCrop" v-else class="btn">停止截图</button>
        <button @click="clearCrop" class="btn">清除截图</button>-->
        <button @click="rotateLeft" class="btn fl">
          <i class="turnleft icon"></i>向左旋转
        </button>
        <button @click="rotateRight" class="btn fl" style="margin-right:44px">
          <i class="turnright icon"></i>
          向右旋转
        </button>
        <button @click="changeScale(1)" class="btn fl">
          <i class="el-icon-zoom-in"></i>
        </button>
        <button @click="changeScale(-1)" class="btn fl">
          <i class="el-icon-zoom-out"></i>
        </button>
        <button @click="refreshCrop" class="btn">
          <i class="el-icon-refresh"></i>
        </button>
        <button @click="finish(fileType)" class="btn fr">保存</button>
        <!-- <a @click="down('base64')" class="btn">download(base64)</a>
        <a @click="down('blob')" class="btn">download(blob)</a>-->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
  name: 'uploadcut',
  props: {
    title: {
      type: String,
      default: ''
    },
    showUpload: {
      type: Boolean,
      default: false
    },
    fileType: {
      type: String,
      default: 'base64'
    }
  },
  data () {
    return {
      model: false,
      modelSrc: '',
      crap: false,
      previews: {},
      fielName: '',
      option: {
        img: '',
        size: 1,
        outputType: 'png',
        info: true,
        canScale: true,
        full: false,
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 120,
        autoCropHeight: 180,
        centerBox: false,
        high: true
      },
      show: true
    }
  },
  computed: {
    isShowUpload: {
      get: function () {
        return this.showUpload
      },
      set: function (newValue) {
        console.log(newValue)
      }
    }
  },
  methods: {
    // 点击上传图片
    uploadImg (e, num) {
      var file = e.target.files[0]
      this.fielName = file.name
      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
        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
        }
      }
      reader.readAsArrayBuffer(file)
    },
    // startCrop () {
    //   this.crap = true
    //   this.$refs.cropper.startCrop() // 开始截图
    // },
    // stopCrop () {
    //   this.crap = false
    //   this.$refs.cropper.stopCrop() // 停止截图
    // },
    // clearCrop () {
    //   this.$refs.cropper.clearCrop() // 清除截图
    // },
    // 刷新重新裁剪
    refreshCrop () {
      this.$refs.cropper.refresh()
    },
    // 放大、缩小
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    // 保存
    finish (type) {
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          // var img = window.URL.createObjectURL(data)
          this.model = true
        })
      } else {
        // 获取截图信息(base64位)
        this.$refs.cropper.getCropData((data) => {
          // 将base64转换成文件
          this.model = true
          let file = this.dataURLtoFile(data)
          this.$emit('save_file', file)
        })
      }
    },
    // 将base64转换为文件
    dataURLtoFile (dataurl) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], this.fielName, { type: mime })
    },
    imgLoad (msg) {
      // console.log(msg)
    },
    // 实时裁剪
    realTime (data) {
      this.previews = data
      this.$set(this.previews, 'url', data.url)
    },
    // 上传按钮上传成功执行事件
    handleUploadSuccess (response, file, fileList) {
      this.log('Upload response is %o', response)
      this.fileinfo = response
      this.fileUpload = file
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = file.url
        this.isShowCropper = true
      })
    },
    close () {
      this.$emit('upload-close')
    }
  },
  components: {
    VueCropper
  }
}
</script>
<style>
.upload_con .el-dialog .el-dialog__header {
  border-bottom: 1px solid #dfdfdf;
}
.upload_con .el-dialog .el-dialog__body {
  padding: 30px;
}
.upload_con .cut {
  width: 100%;
  height: 220px;
  margin: 30px auto;
}
.upload_con .cut .vue-cropper {
  width: 380px;
  float: left;
  margin-right: 25px;
}
/* .upload_con .cut  .show-preview {
   margin-left: 25px;
  background: #e1e1e1;
} */
/* .upload_con .cut .review_img {
  width: 120px;
  height: 180px;
  margin-left: 25px;
  background: #e1e1e1;
}
.upload_con .cut .review_img img {
  display: block;
  width: 100%;
} */
.upload_con .c-item {
  max-width: 800px;
  margin: 10px auto;
  margin-top: 20px;
}
.upload_con .content {
  margin: auto;
  max-width: 1200px;
  margin-bottom: 100px;
}
.upload_con .test-button {
  padding-right: 20px;
}
.upload_con .btn {
  display: inline-block;
  outline: none;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  background-color: #50bfff;
  border-color: #50bfff;
  color: #fff;
  border-radius: 6px;
  height: 26px;
  line-height: 26px;
  margin-right: 13px;
  padding: 0 10px;
}
.upload_con .btn i {
  font-size: 16px;
  line-height: 26px;
}
.upload_con .btn i.icon {
  display: block;
  float: left;
  width: 12px;
  height: 12px;
  background: url(../assets/img/turnLeft.png) no-repeat;
  margin-top: 6px;
  margin-right: 5px;
}
.upload_con .btn i.turnright {
  background-image: url(../assets/img/turnRight.png);
}
</style>