vue-cropperjs如何设置剪裁的宽高，和其他常用属性

`vue-cropperjs`插件提供了许多属性可以用于设置剪裁的宽高以及其他常用属性。以下是一些常用属性的介绍：

- `src`：设置需要剪裁的图片的地址。
- `width`：设置剪裁框的宽度，单位为像素。
- `height`：设置剪裁框的高度，单位为像素。
- `aspectRatio`：设置剪裁框的宽高比，例如`aspectRatio: 16 / 9`表示剪裁框的宽高比为16:9。
- `viewMode`：设置剪裁框的显示模式，有0、1、2、3四种模式可选，分别是：
- `0`：表示自由模式，可以任意调整剪裁框的大小和位置。
- `1`：表示限制比例模式，剪裁框的宽高比受`aspectRatio`属性的限制，但可以任意调整剪裁框的大小和位置。
- `2`：表示限制大小模式，剪裁框的大小受`width`和`height`属性的限制，但可以任意调整剪裁框的位置。
- `3`：表示限制比例和大小模式，剪裁框的大小和宽高比受`width`、`height`和`aspectRatio`属性的限制，但可以任意调整剪裁框的位置。
- `center`：设置剪裁框的位置是否居中，有`true`和`false`两种值可选，分别表示居中和不居中。
- `zoomable`：设置是否允许缩放图片，有`true`和`false`两种值可选，分别表示允许和不允许。
- `scalable`：设置是否允许调整剪裁框大小，有`true`和`false`两种值可选，分别表示允许和不允许。
- `rotatable`：设置是否允许旋转图片，有`true`和`false`两种值可选，分别表示允许和不允许。
- `guides`：设置是否显示剪裁框的虚线辅助线，有`true`和`false`两种值可选，分别表示显示和不显示。
- `crop`：设置剪裁完成后的回调函数，可以通过该函数获取剪裁后的图片地址和剪裁框的位置和大小等信息。

下面是一个完整的`vue-cropperjs`组件的例子，可以参考一下：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :width="300"
      :height="200"
      :aspectRatio="16 / 9"
      :viewMode="2"
      :center="true"
      :zoomable="true"
      :scalable="true"
      :rotatable="true"
      :guides="true"
      @cropend="getCroppedImage"
    />
    <button @click="getCroppedImage">剪裁</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
    }
  },
  methods: {
    getCroppedImage() {
      const cropper = this.$refs.cropper
      const croppedImage = cropper.getCroppedCanvas().toDataURL()
      console.log(croppedImage)
    },
  },
}
</script>

在上面的例子中，设置了图片地址为`https://example.com/image.jpg`，剪裁框的宽为300px，高为200px，宽高比为16:9，显示模式为限制大小模式，剪裁框位置居中，允许缩放、调整大小和旋转，显示虚线辅助线。同时设置了`getCroppedImage`方法作为剪裁完成后的回调函数，在该函数中可以获取剪裁后的图片地址。