2024年08月29日 建站教程
Vue Cropper是一个实用的JavaScript图像裁剪插件。基于Vue.js，实现了放大缩小、旋转、拖动区域裁剪、图像压缩、web上传等功能。API也非常简单易用。
Vue Cropper 图片裁剪插件功能介绍
1、图片放大、缩小
2、图片旋转
3、拖动选区，按区域裁剪图片
4、支持输入网络图片
5、支持输入 JPG / PNG / WebP 格式图片
安装 Vue Cropper
# npm 安装
npm install vue-cropper
# yarn 安装
yarn add vue-cropper
// 在 Vue 3 中使用
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
// 使用组件
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
></vueCropper>
在线引入 cdn 地址：
// 在线引入，需要新引入 vue.js
<script src="/statichttps://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="/statichttps://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js"></script>
// 初始化 Vue
const app = Vue.createApp({...});
// 使用插件
app.component('vue-cropper', window['vue-cropper'].VueCropper);
本文链接：http://so.lmcjl.com/news/11714/