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中显示网络图片，你可以按照以下步骤操作：

1. 首先，将网络图片的URL传递给vue-cropper组件的"img"属性。你可以在引用中的"imageToBase64"方法中将网络图片的URL赋值给vue-cropper的"img"属性。代码示例如下：

   imageToBase64(file) {
     // 将网络图片的URL赋值给vue-cropper的img属性
     this.option.img = file.url; // 假设file为网络图片对象，url为图片的URL
     this.dialogVisible = true;
   }

2. 然后，确保vue-cropper组件正确地渲染网络图片。你可以使用element-ui的`<el-dialog>`组件包裹vue-cropper组件，以便弹出对话框显示图片。代码示例如下：

   <template>
     <el-dialog v-model="dialogVisible" title="Cropper">
       <vue-cropper ref="cropper" :img="option.img"></vue-cropper>
       <div slot="footer">
         <el-button @click="cancel">Cancel</el-button>
         <el-button type="primary" @click="confirm">Confirm</el-button>
       </div>
     </el-dialog>
   </template>

在这个示例中，通过使用`v-model="dialogVisible"`来控制对话框的显示和隐藏。vue-cropper的"img"属性被绑定到"option.img"，以确保vue-cropper能够正确地显示网络图片。

3. 最后，你需要在点击"Confirm"按钮时获取裁剪后的图片数据。你可以使用vue-cropper提供的`getCropData`方法来获取裁剪后的图片数据，并根据你的需求进行处理。在你的示例中，你可以在"finish"方法中调用`getCropData`方法，获取裁剪后的图片数据并上传到服务器。代码示例如下：

   finish() {
     this.$refs.cropper.getCropData(data => {
       // 获取裁剪后的图片数据
       let files = this.dataURLtoFile(data, Date.parse(new Date()), 'my.jpeg');
       this.file = files;

       // 执行上传操作或其他处理
       // ...
     });
     this.dialogVisible = false;
   }

通过以上步骤，你可以在vue-cropper中显示网络图片，并进行裁剪和处理相关操作。请根据你的实际需求进行相应的修改和补充。