vue vue-cropper图片裁剪使用

先声明本人是通过input点击上传图片，如果想要实现element Upload 上传的话，也可以参考，其实大同小异

逻辑大致是：先上传图片获取到图片地址后，然后进行裁剪，裁剪完成后通过裁剪方法获取base64，然后呢base64转为file类型，再通过file类型处理成自己想要的格式

裁剪参考链接：https://github.com/xyxiao001/vue-cropper(字段参数我截图放到最下面，这个链接有时候经常打不开！)

以下代码字段说明：
cropperStatus：是否显示裁剪框
imgUrl：裁剪前图片地址
imgputType：获取图片类型
fixedWidNumber：获取图片宽度
imgFile：图片的base类型数据
widthScale：{width:375，height:200} 图片需要裁剪的比例（你们可以按照自己的需求更改哈）

template：

上传图片




   

   上传图片
    
    

      重新上传
      

        取消
        保存
      
    
  

js：

import sha1 from 'sha1-file-web'

// 出发input框进行上传
selectFile() {
  this.cropperStatus = false
  this.$refs.iptFile.value = '' // 这步是把input值清空，避免取消选择后再重新选择同一张图片无法选择
  this.$refs.iptFile.click()
},
// 上传后的路径处理
getFiles() {
 this.files = this.$refs.iptFile.files
 this.fileList = []
 Object.keys(this.files).forEach(async(item, i) => {
   const baseFile = await getBase64(this.files[item]) 
   // 单张图片裁剪
   if (this.fileType === 'image' && !this.cropperStatus && this.isMult === false) {
     this.cropperStatus = true  // 是否显示裁剪框
      this.imgUrl = 'data:image/png;base64,' + baseFile.base64
      this.imgputType = baseFile.thumb_url.split('.')[1]
      this.imgFile = baseFile
      return
    }
  }
},
// base64转file
dataURLtoFile(dataURL, fileName) {
  const arr = dataURL.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], fileName, { type: mime })
},
// 图片文件转base64
getBase64(file) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = async e => {
      const fileSha = await sha1(file)
      file.thumb_url = 'files/' + fileSha.substr(-1, 1) + '/' + fileSha.substr(-2, 1) + '/' + fileSha.substr(-4, 1) + fileSha.substr(-3, 1) + '/' + fileSha + '.' + file.name.split('.')[1]
      file.base64 = e.target.result.split(',')[1]
      const image = new Image()
      image.src = e.target.result
      image.onload = function() {
        file.width = image.naturalWidth
        file.height = image.naturalHeight
        resolve(file)
      }
    }
  })
}
// 裁剪后的路径处理，先获取base64，转化为file类型，获取到file类型后处理成自己想要的
saveCropper() {
  this.$refs.cropper.getCropData(async(data) => {
    let blobFile = await this.dataURLtoFile(data, this.imgFile.name)
    blobFile = await this.getBase64(blobFile)
    cosnole.log("裁剪后的数据：", blobFile)
   	/**
   	*最后打印出来，应该是类似这样的
    *({
	    *base64: "iVBORw0KGgoAAAANSUhEUgAAAXcAAADICAYAAAATK6HqAAAAA
		*height: 200
		*thumb_url: "files/f/b/a4/776954cc1107494a95bb8c2399c4cee6feb4a4bf.png"
		*width: 375
		*lastModified: 1644399523908
		*lastModifiedDate: Wed Feb 09 2022 17:38:43 GMT+0800 (中国标准时间) {}
		*name: "微信截图.png"
		*size: 18090
		*type: "image/png"
		*webkitRelativePath: ""
	*})
	*/
},
// 取消裁剪
cancalCropper() {
  this.imgUrl = ''
  this.imgputType = ''
  this.imgFile = {}
  this.cropperStatus = false
}

scss:

// 裁剪样式 你们可以按照你的设计自己调整
/deep/.cropper-view-box{
  outline: none;
}
.cropper-toast{
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0, 0, 0, 0.4);
  div{
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding:25px 25px 30px;
    .cropper-title{
      font-size: 18px;
      padding-bottom:19px;
    }
    .cropper-btn{
      padding-top:32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      .cropper-cancel{
        background: #FFFFFF;
        color:#636363;
        border: 1px solid #E0E3E8;
        margin-right:15px;
      }
    }
    /deep/.cropper-modal{
      background: #fff;
    }
  }
}

本人小白一枚，有问题欢迎指正，不喜勿喷哦！