Vue 使用vue-cropper截图

最新推荐文章于 2025-11-15 17:54:29 发布

原创最新推荐文章于 2025-11-15 17:54:29 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

web 同时被 3 个专栏收录

31 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

26 篇文章

订阅专栏

本文详细介绍了如何使用Vue-Cropper截图组件，包括安装依赖、页面引入、参数配置、组件注册及内置方法调用。同时，提供了获取截图图片的方法。

使用vue-cropper截图

1.下载vue-cropper依赖

npm install vue-cropper

2.在使用的页面引入

 import VueCropper from 'vue-cropper'

3.页面使用

      <vueCropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info"
        :canScale="option.canScale" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight"
        :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="option.full" :fixedBox="option.fixedBox"
        :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
        :centerBox="option.centerBox" :infoTrue="option.infoTrue" :high="option.high" :maxImgSize="option.maxImgSize"
        :enlarge="option.enlarge" :mode="option.mode" :modal="option.modal"></vueCropper>
    </div>

4.data里的参数

option: {
          img: '', // 裁剪图片的地址
          info: false, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'png', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 100, // 默认生成截图框宽度
          autoCropHeight: 100, // 默认生成截图框高度
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [1, 1], // 截图框的宽高比例
          fixedBox: false, // 固定截图框大小 不允许改变
          full: false, // 是否输出原图比例的截图
          canMove: false, //上传图片是否可以移动
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          high: false, //是否按照设备的dpr 输出等比例图片
          infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          maxImgSize: 2000, //限制图片最大宽度和高度
          enlarge: 1, //图片根据截图框输出比例倍数
          mode: 'contain', //图片默认渲染方式 contain , cover, 100px, 100% auto
        },

5.注册组件

    components: {
      VueCropper,
    },

6.官网上的内置方法

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度

7.获取截图后的图片

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})
 
// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})