vue的图片裁剪vue-cropper

安装

npm install vue-cropper

图片裁剪(代码只做参考，直接运行会报错)

<el-form-item label="活动封面" prop="activityCover">
  <div class="active_form_upload">
    <!-- <el-upload class="avatar-uploader" action="/party/fundamental/head/uploadHead" :headers="upLoadHeader"
      :on-success="imgSuccess" :before-upload="imgBefore">
      <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload> -->
    <el-upload class="avatar-uploader" action="/party/fundamental/head/uploadHead" :headers="upLoadHeader"
      :show-file-list="false" :on-change="handleImgChange" :http-request="handleHttpRequest1">
      <!-- <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
      <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <span class="upload_span">支持大小不超过2M的JPG、JPEG、PNG、GIF、BMP图片上传</span>
    <span class="el-upload-actions" v-if="dialogImageUrl">
      <span class="el-upload-delete">
        <i class="el-icon-del" @click.stop="handleRemoveOne()"></i>
      </span>
    </span>
  </div>
</el-form-item>

<!-- 封面图片裁剪 -->
<el-dialog title="图片剪裁" :visible.sync="dialogCropper" :close-on-click-modal="false" append-to-body>
  <div class="cropper-content">
    <div class="cropper" style="text-align: center;">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox"
      ></vueCropper>
    </div>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="changeScale(1)">+</el-button>
    <el-button @click="changeScale(-1)">-</el-button>
    <el-button @click="rotateLeft">↺</el-button>
    <el-button @click="rotateRight">↻</el-button>
    <el-button @click="dialogCropper = false">取 消</el-button>
    <el-button type="primary" @click="finish">上传</el-button>
  </div>
</el-dialog>
</div>

import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      // 图片裁剪
      dialogCropper: false,
      previews: {},
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 150, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [4, 3], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        canMove:false,//
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
    }
  },
methods:{
    handleRemoveOne () {
      this.dialogImageUrl = "";
      this.activeReleaseForm.activityCover = "";
    },
    changeScale(val) {
      this.$refs.cropper.changeScale(val);
    },
    // 旋转图片
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    handleHttpRequest1(){},
    // 图片上传事件
    finish() {
      this.$refs.cropper.getCropData(res => {
        let file = this.dataURLtoFile(res, this.fileName);
        this.handleHttpRequest(file);
        this.dialogCropper = false;
      });
    },
    // base64转file
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async handleHttpRequest(file) {
      let formData = new FormData();
      formData.append("file", file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      const res = await this.$http.post(
        "/party/fundamental/head/uploadHead",
        formData,
        config
      );
      if (res.data.success) {
        let activityCover= [];
        activityCover.push(res.data.data.key)
        this.activeReleaseForm.activityCover = activityCover;
        this.dialogImageUrl = URL.createObjectURL(file);
      }
    },
    // 上传图片change事件
    handleImgChange(file, fileList) {//JPG、JPEG、PNG、GIF、BMP
      const isIMG = [".jpeg", ".jpg", ".png", ".bmp", ".gif",".JPEG",".JPG",".GIF",".PNG",".BMP"].some(r => file.name.endsWith(r));
      if (!isIMG) {
       this.$message.error("暂不支持该文件类型!");
        return false
      }
      const isLt2M = file.size / 1024 /1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过2M!");
        // this.dialogCropper = false;
        return false
      }
      this.fileName = file.name;
      console.log(file.raw)
      this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw);
        this.dialogCropper = true;
      });
    },
  }
}