Vue element 图片截取

Vue element 图片截取

安装依赖

npm install vue-cropper

引入组件 

import { VueCropper } from 'vue-cropper'
components: { VueCropper }

data({
    return{
        dialogVisible: false,
        imageUploading: false,
        form: {
            imageUrl:''
        },
        option: {
            img: '',
            size: 1,
            full: false,
            outputType: 'png',
            canMove: true,
            fixed: true,
            fixedNumber: [1, 0.63],
            fixedBox: false,
            original: false,
            canMoveBox: true,
            autoCrop: true,
            // 只有自动截图开启 宽度高度才生效
            autoCropWidth: 580,
            autoCropHeight: 366,
            centerBox: false,
            high: true,
            max: 99999
       }
    }
})

<div class="uploadImg" @click="openImgCropper">
                  <img v-if="form.imageUrl" :src="form.imageUrl" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </div>
<el-dialog
      title="Upload Picture"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :output-size="option.outputSize"
            :output-type="option.outputType"
            :info="option.info"
            :can-scale="option.canScale"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed="option.fixed"
            :fixed-box="option.fixedBox"
            :fixed-number="option.fixedNumber"
          />
        </div>
      </div>
      <div class="dialog-text">
        - The image maximum size must less than 5MB.<br>
        - The recommended ratio is 1363 × 860 px
      </div>
      <div slot="footer" class="dialog-footer">
        <el-upload
          class="upload-demo fl"
          :headers="headers"
          :action="uploadUrl"
          :on-change="fileChange"
          :show-file-list="false"
          :auto-upload="false"
        >
          <el-button type="primary" plain>Choose picture</el-button>
        </el-upload>
        <div class="icon-list">
          <i class="el-icon-zoom-in" @click="changeScale(1)" />
          <i class="el-icon-zoom-out" @click="changeScale(-1)" />
        </div>
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button
          type="primary"
          :loading="imageUploading"
          @click="finish"
        >Confirm</el-button>
      </div>
    </el-dialog>

 

openImgCropper() {
      this.dialogVisible = true
    },
checkUpload(file) {
      const acceptType = [
        'image/jpg',
        'image/jpeg',
        'image/png',
        'image/bmp',
        'image/webp'
      ]
      const isType = acceptType.indexOf(file.type) > 0

      if (!isType) {
        this.$message.error(
          'Upload pictures can only be JPG、JPEG、PNG、BMP、WEBP!'
        )
      }
      return isType
    },
    fileChange(file, fileList) {
      console.log(typeof file, file)
      if (this.checkUpload(file.raw)) {
        const fr = new FileReader()
        fr.onload = e => {
          this.option.img = fr.result
          this.option.outputType = file.raw.type.substring(6)
          this.option.fileName = file.raw.name
        }
        fr.readAsDataURL(file.raw)
      }
    },
    changeScale(num) {
      this.$refs.cropper.changeScale(num)
    },
    finish() {
      this.imageUploading = true
      this.$refs.cropper.getCropBlob(blob => {
        const formData = new FormData()
        formData.append('file', blob, this.option.fileName)
        // 调用上传图片接口
        API_ownerUpload(formData)
          .then(res => {
            if (res.status.code === 0) {
              this.$message.success('Upload Success')
              this.form.imageUrl = res.result.url
              this.imageUploading = false
              this.dialogVisible = false
            } else {
              this.$message({ type: 'error', message: res.status.msg })
              this.imageUploading = false
            }
          })
          .finally(() => {})
      })
    }

 

 

GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vuehttps://github.com/xyxiao001/vue-cropper