vue图片截取插件

  <VueCropper
                v-if="isCropper"
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixed="true"
                :fixedBox="option.fixedBox"
                :fixedNumber="fixedNumber"
                :infoTrue="option.infoTrue"
                :centerBox="option.centerBox"
                :maxImgSize="10000"
                :canScale="option.canScale"
              ></VueCropper>

js

import { VueCropper } from "vue-cropper";

  async confirm() {
      // 执行裁剪操作
      this.$refs.cropper.getCropBlob(async (data) => {
        const blobObj = new Blob([data], { type: "image/png" });
        const fileObj = this.blobToFile(blobObj, "example.png");
        let img = window.URL.createObjectURL(data);  
          // 将file数据上传到服务器
          const res = await addUploadImg(fileObj);
          if (res.code == 0) {
            this.audioSource = res.data.imgUrl;
            this.option.oldFileUrl = res.data.fileUrl;
            this.option.img = res.data.coverImg;
            this.isCropper = false
          }
      });
    },


  blobToFile(theBlob, fileName) {
      // 定义文件类型
      const fileType = theBlob.type;
      // 根据 Blob 和文件名 创建一个 File 对象
      const file = new File([theBlob], fileName, { type: fileType });
      // 返回 File
      return file;
    },

data

  option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        fixed: true,
        fixedBox: false,
        // fixedNumber: [1, 1],
        autoCropWidth: 150,
        autoCropHeight: 150,
        infoTrue: false,
        centerBox: true,
      },