vue-cropper ---demo

npm install vue-cropper --save-dev

<template>
  <div>
    <div class="home-tab-body-img">
      <img :src="cutImg" alt @click="handlePictureCardPreview(cutImg)" />
    </div>
    <label
      class="btn btn-orange"
      for="uploads"
      style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;"
    >选择图片</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="beforeAvatarUploadPS"
    />
    <!-- 剪切图片的弹框-->
    <div class="upload-dialog">
      <a-modal title="图片裁剪" class="upload_dialog_a" v-model="isCropper" :on-ok="false" footer>
        <div class="vue-cropper-box">
          <div class="vue-cropper-content" style="height:400px;width:100%;">
            <a-row>
              <a-col :span="16">
                <vueCropper
                  style="height:400px;"
                  ref="cropper"
                  :img="option.img"
                  :outputSize="option.size"
                  :outputType="option.outputType"
                  :info="option.info"
                  :full="option.full"
                  :canMove="option.canMove"
                  :canMoveBox="option.canMoveBox"
                  :centerBox="option.centerBox"
                  :original="option.original"
                  :autoCrop="option.autoCrop"
                  :autoCropWidth="option.autoCropWidth"
                  :autoCropHeight="option.autoCropHeight"
                  :fixedBox="option.fixedBox"
                  :fixed="option.fixed"
                  :fixedNumber="option.fixedNumber"
                  @realTime="realTime"
                  @imgLoad="imgLoad"
                ></vueCropper>
              </a-col>
              <a-col :span="8" style="padding-left:50px;">
                <div class="preview-box" >
                  <div>预览：</div>
                  <div
                    :style="previews.div"
                    class="preview"
                    style="overflow:hidden;border:1px solid #f1f1f1;"
                  >
                    <img :src="previews.url" :style="previews.img" />
                  </div>
                </div>
                <div style="margin-top:20px;text-align:center;">
                  <a-button class="up_foot_button" style="display:inline-block;" type="primary" @click="onCubeImg">确认插入图片</a-button>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="operate-wrap">
          <div class="up_foot_box clearfix">
            <a-button
              class="up_foot_button"
              type="primary"
              style="position:relative;display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;"
            >
              选择图片
              <input
                type="file"
                id="uploads"
                style="position:absolute;z-index:1001;left:0;top:0; width:70px;opacity:0;"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="beforeAvatarUploadPS"
              />
            </a-button>
            <a-button class="up_foot_button" type="primary" plain @click="turnLeft">左旋转</a-button>
            <a-button class="up_foot_button" type="primary" plain @click="turnRight">右旋转</a-button>
            <a-button class="up_foot_button" type="primary" plain @click="changeScale(1)">放大</a-button>
            <a-button class="up_foot_button" type="primary" plain @click="changeScale(-1)">缩小</a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
// import Api from '@/js/api.js' //接口url配置文件

export default {
  data() {
    return {
      cutImg: require("./img/cut.jpg"),
      fileImgList: [],
      isCropper: false,
      //裁剪组件的基础配置option
      previews: {},
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: "jpg", // 裁剪生成额图片的格式
        canMove: false, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        centerBox: true, //截图框是否限制在图片里面
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 180, // 默认生成截图框宽度
        autoCropHeight: 180, // 默认生成截图框高度
        fixedBox: false, // 截图框固定大小
        fixed: true,
        fixedNumber: [1, 1] //截图框的宽高比例
      }
    };
  },
  components: {
    VueCropper
  },
  methods: {
    handlePictureCardPreview(cutImg) {
      this.option.img = cutImg;
      console.log(this.option.img);
      this.isCropper = true;
    },
    beforeAvatarUploadPS(e) {
      var file = e.target.files[0];
      this.option.img = URL.createObjectURL(file);

      const isDWG = file.name.split(".");
      const format = isDWG[isDWG.length - 1];
      // this.uploadParams.isFile = "1";
      // uploadParams.file="";
      if (format != "png" && format != "jpg") {
        this.$message.error("上传文件只能是 png或jpg 格式!");
        return false;
      }
      this.isCropper = true;
    },
    // 然后我加了几个剪切的按钮进行旋转或放大，并把上传方法一并粘贴到如下：

    turnLeft() {
      this.$refs.cropper.rotateLeft();
    },
    turnRight() {
      this.$refs.cropper.rotateRight();
    },
    cancleCropper() {
      //取消截图
      this.isCropper = false;
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    imgLoad(msg) {
      console.log("imgLoad");
      console.log(msg);
    },
    // 实时预览函数
    realTime(data) {
      console.log("realTime:", data);
      this.previews = data;
    },
    onCubeImg() {
      //剪切上传
      // 获取cropper的截图的base64 数据
      this.$refs.cropper.getCropData(data => {
        // this.fileinfo.url = data;

        //先将显示图片地址清空，防止重复显示
        this.option.img = "";
        this.cutImg = data;
        //将剪裁后base64的图片转化为file格式
        // let file = this.convertBase64UrlToBlob(data);
        // this.fileImg=URL.createObjectURL(file);
        console.log(data);
        this.isCropper = false;
        // this.fileList=[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
      });
    },
    // 将base64的图片转换为file文件
    convertBase64UrlToBlob(urlData) {
      let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
      //处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: "image/jpeg" });
    }

    // 处理完这些你就可以看看你的也页面了
  }
};
</script>
<style >
.upload_dialog_a .ant-modal {
  width: 750px !important;
}
.upload_flex {
  display: flex;
}
img {
  max-width: none;
}
.up_foot_box {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}
.up_foot_button {
  margin-right: 20px;
  background: #ff4c19;
  border: 1px solid #ff4c19;
}
.up_foot_button:hover,.up_foot_button:focus {
  margin-right: 20px;
  background: #f06640;
  border: 1px solid #f06640;
}
</style>