vue2使用 vue-img-cutter 裁剪图片

1：

npm i vue-img-cutter@2 -S  (vue2)
npm i vue-img-cutter@3 -S  (vue3)

下面是使用vue2版本，直接粘贴代码可以使用

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <ImgCutter
          ref="imgCutterModal"
          label="选择本地图片"
          fileType="jpeg"
          :crossOrigin="true"
          rate=""
          tool="false"
          toolBgc="none"
          :isModal="false"
          :showChooseBtn="true"
          :lockScroll="true"
          :boxWidth="790"
          :boxHeight="458"
          :cutWidth="350"
          :cutHeight="350"
          :sizeChange="true"
          :moveAble="true"
          :imgMove="true"
          :originalGraph="false"
          
          :smallToUpload="true"
          :saveCutPosition="true"
          :scaleAble="true"
          :previewMode="true"
          :quality="1"
          :toolBoxOverflow="true"
          @cutDown="cutDown"
          @onPrintImg="onPrintImg"
        >
        </ImgCutter>
      </el-col>
      <!-- 预览 -->
      <el-col :span="8">
        <div class="cutImg">
          <div class="cutImgContainer">
            <img class="cutImgData" :src="previewImg" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ImgCutter from "vue-img-cutter";

export default {
  components: {
    ImgCutter,
  },
  data() {
    return {
      previewImg: "",
    };
  },
    methods: {
    // 确定
    cutDown(res) {
      console.log(res);
    },
    // 预览
    onPrintImg(res) {
      this.previewImg = res.dataURL;
      // console.log(res);
    },
  },
};
</script>

<style>
.cutImg {
  background: #dedede;
  box-sizing: border-box;
  border: 1px solid #dedede;
  height: 458px;
  width: 100%;
}
.cutImgContainer {
  width: 90%;
  height: 90%;
  overflow: hidden;
  margin: 20px auto;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  align-content: space-evenly;
}
.cutImgData{
    max-width: 100%;
    max-height: 100%;
}
</style>