Vue3+cropperjs 实现图片裁剪功能

安装cropperjs

npm install cropperjs --save
或者
yarn add cropperjs

封装一个cropperImg组件

//cropperImg.vue
<template>
  <div>
    <!--使用ref属性给图片元素命名为imageRef-->
    <img ref="imageRef" :src="imageSrc" alt="image" >
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from "vue";
  import Cropper from 'cropperjs'

付费内容，0.11币解锁全文 >>

Vue3 小问答

Vue3 小问答，每天一个问答，你来问我来答

收录 16 篇文章

订阅专栏可永久解锁本文 >>

Vue.jsvue3cropper.js

Hedy

大家好！我是一位前端开发工程师，拥有6年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言，能够灵活运用各种前端框架，如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合，能够为学员提供丰富的案例和实践项目，并以生动、易懂的语言为学员讲解前端开发的核心知识和技能。我不仅注重传授技能，更关注学员的职业发展，希望通过我的教学，帮助学员成为一名优秀的前端开发工程师。