Vue2 vue-cropper
时间: 2023-10-25 07:08:47 浏览: 57
Vue2 vue-cropper 是一个基于 Vue2 的图片裁剪组件,可以方便地实现图片的裁剪和缩放功能。使用 vue-cropper 需要先安装 cropperjs 和 vue-cropper 插件。
安装命令如下:
```
npm install cropperjs vue-cropper --save
```
使用示例:
```vue
<template>
<div>
<vue-cropper
ref="cropper"
:src="imgSrc"
:guides="false"
:view-mode="1"
:drag-mode="cropType"
:auto-crop-area="0.8"
:background="false"
:rotatable="true"
:scalable="true"
:zoomable="true"
:crop-box-movable="true"
:crop-box-resizable="true"
@cropmove="cropmove"
></vue-cropper>
<button @click="getCropData">获取裁剪数据</button>
</div>
</template>
<script>
import VueCropper from "vue-cropper";
import "cropperjs/dist/cropper.css";
export default {
components: {
VueCropper,
},
data() {
return {
imgSrc: "",
cropType: "crop",
};
},
methods: {
cropmove(data) {
console.log(data);
},
getCropData() {
const dataUrl = this.$refs.cropper.getCroppedCanvas().toDataURL();
console.log(dataUrl);
},
},
};
</script>
```