vuecropper（vuecropper的mode怎么设置）

简介：

VueCropper是一款基于Vue.js的图片裁剪组件，支持图片裁剪、缩放、旋转等操作。VueCropper内置了常用的图片裁剪功能，同时还拥有丰富的配置选项，可以应用于各种类型的项目。本文将详细介绍VueCropper的使用方法。

多级标题：

一、安装VueCropper

二、VueCropper使用方法

1. 在Vue中引入VueCropper组件

2. 初始化VueCropper组件

3. 获取裁剪后的图片

三、VueCropper配置项

1. aspectRatio

2. guides

3. dragMode

4. viewMode

内容详细说明：

一、安装VueCropper

在使用VueCropper之前，需要先将其安装到项目中。可以通过npm安装VueCropper：

npm install vue-cropper --save

或通过yarn安装：

yarn add vue-cropper

二、VueCropper使用方法

1. 在Vue中引入VueCropper组件

在需要使用VueCropper的组件中，引入VueCropper组件：

import VueCropper from 'vue-cropper'

export default {

components: { VueCropper }

2. 初始化VueCropper组件

在组件中，使用mounted钩子函数初始化VueCropper组件：

mounted () {

this.$refs.cropper.init()

其中，$refs是一个对象，可以通过它来获取组件实例。init()是VueCroppe提供的初始化方法。

3. 获取裁剪后的图片

通过调用VueCropper实例的getCroppedCanvas()方法，可以获取裁剪后的图片，该方法返回一个Canvas对象，可以通过toDataURL()方法将其转换为Base64格式的数据。

getDataUrl () {

let canvas = this.$refs.cropper.getCroppedCanvas()

this.dataUrl = canvas.toDataURL()

三、VueCropper配置项

VueCropper提供了丰富的配置选项，以下为常用的配置项：

1. aspectRatio

aspectRatio用于设置裁剪框的宽高比，可以是一个数字或一个字符串。如设置为1，则裁剪框的宽高比为1:1。

2. guides

guides用于设置裁剪框边缘的虚线，可以为false、true、'on'和'off'。默认为true。

3. dragMode

dragMode用于设置裁剪框的拖拽模式，可以为'crop'或'move'。'crop'模式表示只能通过裁剪框边缘调整裁剪框大小，'move'模式表示可以通过裁剪框内任意位置拖拽裁剪框。

4. viewMode

viewMode用于设置裁剪框的显示模式，可以为1、2、3和4。1表示裁剪框可以超出图片范围，2表示裁剪框不能超出图片范围，3表示图片完全显示，裁剪框不能改变大小和位置，4表示图片完全显示，裁剪框可以改变大小和位置。