Vue Cropper是一款基于Vue.js和Cropper.js庫開發(fā)的圖片裁剪組件，可以方便地實現(xiàn)圖片的剪裁和裁剪框的自定義。

安裝Vue Cropper：

npm install vue-cropperjs --save

在Vue組件中使用Vue Cropper：

<template>
<div>
<vue-cropper
ref="cropper"
:src="image"
:guides="false"
:view-mode="2"
drag-mode="move"
alt="圖片裁剪"
style="max-height: 500px;">
</vue-cropper>
<div @click="getCroppedImage">裁剪圖片</div>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
components: {
VueCropper,
},
data() {
return {
image: '圖片url',
};
},
methods: {
getCroppedImage() {
this.$refs.cropper.getCroppedCanvas().toBlob((blob) =>{
const formData = new FormData();
formData.append('name', 'image');
formData.append('file', blob);
// 上傳圖片
});
},
},
};
</script>

上面的代碼簡單展示了如何使用Vue Cropper組件進(jìn)行圖片裁剪，具體的屬性可以參考Cropper.js庫，如guides、view-mode、drag-mode等。