vue-cropperjs如何设置默认剪裁出来的图片宽200px，高为100px

你可以通过设置 `canvasWidth` 和 `canvasHeight` 属性来实现默认剪裁出来的图片宽200px，高为100px。具体的代码如下：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :canvasWidth="200"
      :canvasHeight="100"
    ></vue-cropper>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';

export default {
  components: {
    VueCropper,
  },
};
</script>

以上代码中，我们通过 `canvasWidth` 和 `canvasHeight` 属性来设置默认剪裁出来的图片宽为 200px，高为 100px。你可以根据需要进行修改。

相关问题

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`方法作为剪裁完成后的回调函数，在该函数中可以获取剪裁后的图片地址。

vue-cropperjs 怎么设置剪裁框的大小和边框颜色

要设置剪裁框的大小和边框颜色，需要在使用 vue-cropperjs 组件时传入相应的属性。

1. 设置剪裁框大小

在 vue-cropperjs 组件中，可以通过设置 `cropperOptions` 对象的 `aspectRatio` 属性来控制剪裁框的大小。例如，将剪裁框设置为正方形，可以这样写：

<vue-cropper
  ref="cropper"
  :cropperOptions="{ aspectRatio: 1 }"
></vue-cropper>

其中，`aspectRatio` 属性的值表示剪裁框的宽高比，值为 1 表示剪裁框为正方形。

2. 设置边框颜色

在 vue-cropperjs 组件中，可以通过设置 `cropperOptions` 对象的 `cropBoxMovable` 和 `cropBoxResizable` 属性来控制剪裁框的可移动和可调整大小。同时，可以通过设置 `cropperOptions` 对象的 `cropBoxBorderColor` 属性来控制剪裁框的边框颜色。例如，将剪裁框的边框颜色设置为红色，可以这样写：

<vue-cropper
  ref="cropper"
  :cropperOptions="{ cropBoxMovable: false, cropBoxResizable: false, cropBoxBorderColor: 'red' }"
></vue-cropper>

其中，`cropBoxMovable` 和 `cropBoxResizable` 属性的值为 `false`，表示剪裁框不可移动和不可调整大小。`cropBoxBorderColor` 属性的值为 `'red'`，表示剪裁框的边框颜色为红色。