vue安装vue-cropper（截图工具）

# npm

npm install vue-cropper

# cropper.vue

<template>
  <div style="width: auto; height: 500px;">
    <vue-cropper
      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"
      :canScale="option.canScale"
      :autoCrop="option.autoCrop"
      :fixed="option.fixed"
      :fixedNumber="option.fixedNumber"
      :centerBox="option.centerBox"
      :infoTrue="option.infoTrue"
      :fixedBox="option.fixedBox"
      style="background: none;"
    ></vue-cropper>
    <el-row class="mt-4 text-center">
      <el-button type="success" @click="startCrop()">开始截图</el-button>
      <el-button type="primary" @click="finishCrop()">确认截图</el-button>
      <el-button type="warning" @click="stopCrop()">停止截图</el-button>
      <el-button type="danger" @click="clearCrop()">清除截图</el-button>
      <div class="mt-3"></div>
      <el-button @click="rotateRight()">向右边旋转90度</el-button>
      <el-button type="info" @click="rotateLeft()">向左边旋转90度</el-button>
      <div class="mt-3"></div>
      <el-button type="primary" @click="getCropData()">
        获取截图的base64 数据
      </el-button>
      <el-button type="primary" @click="getCropBlob()">
        获取截图的blob数据
      </el-button>
    </el-row>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  name: "index",
  components: {
    VueCropper
  },
  data() {
    return {
      option: {
        img: "/api/2021/04/16/cW0l2d.jpg", // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: false, // 是否默认生成截图框
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        fixedBox: false, // 固定截图框大小 不允许改变
        canMove: false, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      }
    };
  },
  mounted() {
    // let url = "https://z3.ax1x.com/2021/04/16/cW0l2d.jpg";
  },
  methods: {
    // 开始截图
    startCrop() {
      this.$refs.cropper.startCrop();
    },
    // 确认截图
    finishCrop() {
      if (this.$refs.cropper.cropW !== 0) {
        // 获取裁剪
        this.$refs.cropper.getCropData(data => {
          this.option.img = data;
        });
        // 清除裁剪
        this.$refs.cropper.stopCrop();
      }
    },
    // 停止截图
    stopCrop() {
      this.$refs.cropper.stopCrop();
    },
    // 清除截图
    clearCrop() {
      this.$refs.cropper.clearCrop();
    },
    // 向右边旋转90度
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 向左边旋转90度
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 获取截图的base64 数据
    getCropData() {
      this.$refs.cropper.getCropData(data => {
        // do something
        console.log(data);
      });
    },
    // 获取截图的blob数据
    getCropBlob() {
      this.$refs.cropper.getCropBlob(data => {
        // do something
        console.log(data);
      });
    },
    // 截图框宽度
    getCropW() {
      return this.$refs.cropper.cropW;
    },
    // 截图框高度
    getCropH() {
      return this.$refs.cropper.cropH;
    }
  }
};
</script>

<style scoped></style>

# 效果图

# 参考文档

1. 官方文档Github