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默认显示原图宽高

你可以使用`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是一个用于图片裁剪的库，如果遇到缩放比例过小的问题，你可以尝试以下几个步骤来解决：

1. **调整初始化设置**：在引入Cropper组件时，检查默认的options配置，比如`{ minZoom }`属性。确保它设置了合理的最小缩放值，例如 `{ minZoom: 0.5 }`，这将限制缩放级别最低不会低于50%。

<vue-cropper :options="{ minZoom: 0.5 }" />

2. **提供用户交互**：允许用户通过点击或触摸屏幕手动调整缩放。Vue-Cropper提供了`zoom`和`pan`事件，用户可以在事件处理函数中动态改变缩放。

3. **使用比例约束**：如果图片内容对于缩放有特定要求，可以限制用户在某个范围内的缩放，比如只允许放大到某一倍数。

4. **检查浏览器兼容性**：某些浏览器对缩放有自身的限制，确保你在所有目标浏览器上测试，并在需要时添加相应的处理。

5. **检查图片尺寸**：如果图片本身很小，确实可能导致初始缩放较小。你可以提供一个更大的预览图源，然后让cropper在适当的时候加载原图。

如果上述方法都无法解决问题，你可能需要查看Vue-Cropper的官方文档、GitHub Issues或其他开发者论坛，看看是否已有类似问题的解决方案。