Vue Cropper是一個強大的圖片裁剪組件，可以讓你輕松地對圖片進行剪裁并在瀏覽器中預覽。

下面是一個基本的Vue Cropper預覽示例：

<template><div><img :src="imageUrl" /><vue-cropper v-model="image" :output-size="{ width: 200, height: 200 }" /><button @click="previewImage">預覽</button></div></template><script>import VueCropper from 'vue-cropper'
export default {
components: {
VueCropper
},
data () {
return {
image: null,
imageUrl: 'https://picsum.photos/400/400'
}
},
methods: {
previewImage () {
const image = this.$refs.vueCropper.getCroppedCanvas().toDataURL()
window.open(image)
}
}
}
</script>

上面的代碼中，我們首先導入了VueCropper組件，并將其添加到了模板中。在數據中，我們定義了一個image變量和一個imageUrl變量，分別用于存儲剪裁后的圖片和原始圖片的URL。在預覽按鈕的click事件中，我們使用getCroppedCanvas()方法獲取剪裁后的canvas元素，并使用toDataURL()方法將其轉換成URL，最后調用window.open()方法在新窗口中打開預覽圖。

如果你想進一步了解Vue Cropper的功能和API，請訪問官方文檔。祝愉快！