vue-cropper默认显示原图宽高

你可以使用`defaultOptions`属性来设置vue-cropper默认显示原图的宽高。在`defaultOptions`中，你可以设置`viewMode`为2，并提供一个`aspectRatio`值来指定宽高比例。例如，如果你想要默认显示原图的宽高比为16:9，你可以这样设置：

<template>
  <vue-cropper
    ...
    :defaultOptions="{
      viewMode: 2,
      aspectRatio: 16 / 9
    }"
  ></vue-cropper>
</template>

这样设置后，vue-cropper将会默认显示原图的宽高比为16:9。你可以根据自己的需求来调整`aspectRatio`的值。

相关问题

vue-cropper显示原图宽高

你可以使用vue-cropper组件的`output`属性来获取裁剪结果的原始图片宽高。在裁剪完成后，`output`对象中的`width`和`height`属性会包含原图的宽度和高度信息。

以下是一个示例代码：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :output="output"
      @crop="onCrop"
    ></vue-cropper>
    
    <div v-if="output.width && output.height">
      原图宽度：{{ output.width }}px<br>
      原图高度：{{ output.height }}px
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      output: {}
    };
  },
  methods: {
    onCrop(data) {
      this.output = data;
    }
  }
};
</script>

在上述代码中，`output`对象会在裁剪完成后被更新。当`output.width`和`output.height`存在值时，就可以显示原图的宽度和高度信息。

如何设置vue-cropper的剪裁参数？

要设置vue-cropper的剪裁参数，您可以使用props来传递参数。以下是一些常用的剪裁参数：

1. width：设置剪裁框的宽度，默认为200。
2. height：设置剪裁框的高度，默认为200。
3. fixed：设置剪裁框的宽高比是否固定，默认为false。
4. fixedNumber：如果fixed为true，则可以通过此选项设置固定的宽高比，默认为1。
5. canScale：设置是否允许缩放，默认为true。
6. original：设置是否保留原图像，默认为true。
7. canMove：设置是否允许移动剪裁框，默认为true。

您可以在使用vue-cropper时将这些参数传递给组件，如下所示：

<vue-cropper
  :width="400"
  :height="300"
  :fixed="true"
  :fixedNumber="16 / 9"
  :canScale="false"
  :original="false"
  :canMove="false"
></vue-cropper>