Vue Cropper是一個基于Vue.js的圖像裁剪器組件。 它提供了一系列易于使用和自定義選項，可以方便地在Vue.js項目中添加圖像裁剪功能。

Vue Cropper的一個很好的特點是支持同時預覽和編輯。 在進行裁剪時，預覽圖像和剪切位置會實時更新，以便您可以立即查看并調整圖像的剪切位置。

<template>
<div>
<vue-cropper
ref="cropper"
:guides="false"
:view-mode="1"
:drag-mode="crop"
:auto-crop-area="0.8"
:background="false"
:rotatable="true"
:scalable="false"
:crop-box-movable="false"
:crop-box-resizable="false"
:crop="onCrop"
/>
<button @click="cropImage">Crop</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropper';
export default {
components: {
VueCropper,
},
data() {
return {
image: null,
};
},
methods: {
onCrop() {
this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
this.image = URL.createObjectURL(blob);
});
},
cropImage() {
this.$refs.cropper.crop();
},
},
};
</script>

您可以在該代碼中看到如何使用Vue Cropper在vue.js中添加圖像裁剪功能。在template部分，我們將Vue Cropper添加為一個組件，并使用各種選項自定義其行為和樣式。在方法中，我們設置了onCrop()方法來獲取裁剪后的圖像并顯示在預覽區域中。 cropImage()方法實際上觸發裁剪操作。

考慮到預覽功能，您還可以在組件中使用具有各種自定義選項的vue-jcrop組件，該組件使您能夠輕松創建可旋轉和縮放的圖像裁剪區域，并支持實時預覽。