Vue Cropper 是一个基于
Vue.js 的图片裁剪组件，可以实现图片的
预览功能。以下是一个简单的示例代码：
1. 首先，安装
vue-
cropper 包：
```bash
npm install
vue-
cropper
```
2. 在你的
Vue 组件中引入
vue-
cropper：
```
javascript
import
VueCropper from '
vue-
cropper'
export default {
components: {
VueCropper
},
data() {
return {
image: '',
cropOptions: {
aspectRatio: 16 / 9, // 裁剪框的宽高比
auto
CropArea: 0.6, // 默认裁剪框的大小占图片的比例
movable: true, // 是否允许移动图片
scalable: true, // 是否允许缩放图片
zoomable: true, // 是否允许缩放图片
rotatable: true, // 是否允许旋转图片
viewMode: 1, // 显示裁剪框的模式，表示自由模式，1表示限制裁剪框在容器内
guides: true, // 是否显示裁剪框虚线
background: true, // 是否显示容器背景
highlight: true, // 是否显示裁剪框周围的高亮区域
auto
Crop: true, // 是否默认生成截图框
checkCrossOrigin: false, // 当检查到图片不符合跨域时，是否强制加载图片
}
}
},
methods: {
onImageChange(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = (event) => {
this.image = event.target.result
}
if (file) {
reader.readAsDataURL(file)
}
},
on
Crop() {
// 裁剪后的回调函数
// 可以在这里处理裁剪后的图片
console.log('裁剪完成')
}
}
}
```
3. 在模板中
使用 vue-
cropper 组件：
```html
<template>
<div>
<input type="file" @change="onImageChange">
<
vue-
cropper
v-model="image"
:options="
cropOptions"
@
crop="on
Crop"
></
vue-
cropper>
</div>
</template>
```
通过上述代码，你可以实现在页面上选择图片后，
预览并进行裁剪。注意，在示例代码中，需要
使用 `v-model` 指令来双向绑定图片地址到 `image` 数据属性上。同时，`@
crop` 事件会在裁剪完成后触发，你可以在回调函数中处理裁剪后的图片。
希望以上解答能够帮助到你！如果还有其他问题，请随时提问。
2752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
