2024年06月16日 建站教程
npm install vue-cropper --save
vue裁剪功能具体代码：
// MyComponent.vue
<template>
<div>
<vue-cropper
ref="cropper"
:img="imgSrc"
:output-type="outputType"
:can-zoom="canZoom"
:can-move="canMove"
:center-box="centerBox"
:show-remove-btn="showRemoveBtn"
:support-ratio="supportRatio"
:fixed-ratio="fixedRatio"
></vue-cropper>
<button @click="crop">裁剪</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropper';
export default {
components: {
VueCropper
},
data() {
return {
imgSrc: '', // 图片路径
outputType: 'jpeg', // 输出类型
canZoom: true, // 是否可以缩放
canMove: true, // 是否可以移动
centerBox: true, // 是否居中显示
showRemoveBtn: true, // 是否显示删除按钮
supportRatio: [], // 图片比例限制
fixedRatio: false // 是否固定比例
}
},
methods: {
crop() {
const croppedData = this.$refs.cropper.getCroppedCanvas().toDataURL(); // 获取裁剪后的图片数据
// 处理裁剪后的图片数据
}
}
};
</script>
本文链接：http://so.lmcjl.com/news/6681/