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>