Vue使用vue-cropper裁剪图片

npm安装

npm install vue-cropper

页面引用

import {
      VueCropper } from "vue-cropper";
  components: {
     
    VueCropper,
  },

<template>
  <div class="box">
    <div class="crop">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :autoCrop="option.autoCrop"
      >vueCropper>
    div>
    <div class="btn">
      <el-button type="primary" @click="getCropData()">截图el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-left"
        @click="rotateLeft()"
      >el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        @click="rotateRight()"
      >el-button>
      <el-button type="primary" @click="refresh()">重置el-button>
    div>
    <img class="pic" :src="imgUrl" alt="" />
  div>
template>

<script>
import {
       VueCropper } from "vue-cropper";
export default {
      
  components: {
      
    VueCropper,
  },
  data() {
      
    return {
      
      option: {
      
        img: "https://sucai.suoluomei.cn/sucai_zs/images/20201009165025-bg.png", // 裁剪图片的地址
        autoCrop: true, //是否默认生成截图框
        fixedBox: true, //固定截图框大小 不允许改变
      },
      imgUrl: "",
    };
  },
  methods: {
      
    // 左旋转
    rotateLeft() {
      
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRight() {
      
      this.$refs.cropper.rotateRight();
    },
    // 重置
    refresh() {
      
      this.$refs.cropper.refresh();
    },
    // 生成blob图片
    getCropData() {
      
      this.$refs.cropper.getCropData((data) => {
      
        this.imgUrl = data;
      });
    },
  },
};
script>

<style scoped>
.box {
      
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.crop,
.pic {
      
  width: 600px;
  height: 400px;
  object-fit: cover;
}
.btn {
      
  display: flex;
  flex-direction: column;
}
.btn button {
      
  margin: 10px 0;
}
style>