Vue - 详细介绍vue-cropper图片截图组件，支持自定义设置截图框（Vue2 & Vue3）

miaomiaowins

已于 2024-09-29 09:19:26 修改

阅读量7.4k

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-09-26 17:19:38 首次发布

本文链接：https://blog.youkuaiyun.com/miaomiaowins/article/details/142524823

版权

Vue - 详细介绍vue-cropper图片截图组件（Vue2 & Vue3）

对于一些项目中上传头像照片背景图等图片需要裁切图片大小，可以使用该组件对图片文件进行旋转截图并上传到服务器保存或下载到本地；可设置裁剪框自定义配置参数和设置裁切后的图片，下面我们一起来学习下。

1. 安装

npm 安装：

  # vue2.x版本
  npm install vue-cropper -d --save

  # vue3.x版本
  npm install vue-cropper@next -d --save

yarn 安装：

 # vue2.x版本
  yarn add vue-cropper

  # vue3.x版本
  yarn add vue-cropper@next

为了演示，我使用了elementUI的ElMessageBox组件，具体安装教程参考（可选）：
element-UI：Vue2
element-plus：Vue3

2. 引入并使用

Vue 组件内引入

# vue2
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

# vue3
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

Vue 全局引入

# vue2 
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

# vue3
import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'
const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

Vue CDN 方式引入

# vue2
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)

# vue3
<style type="text/css" src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/index.css"></style> 
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js"></script>
const app = Vue.createApp({...});
app.component('vue-cropper', window['vue-cropper'].VueCropper);

Vue3 - 示例1（基础使用）：

在这里插入图片描述

<template>
  <div class="Com_view">
    <div class="box_cropper">
      <vue-cropper
        ref="cropper"
        :img="option.img"
        :infoTrue="option.infoTrue"
        :full="option.full"
        :auto-crop="option.autoCrop"
      >
      </vue-cropper>
    </div>
    <div class="box_btn">
      <el-button type="primary" plain @click="onClick">获取截图</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";

const cropper = ref("");
const cropper_width = ref(0); // 真实的输出图片宽度
const cropper_height = ref(0); // 真实的输出图片高度

const option = reactive({
  img: new URL("./assets/1.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图框
  full: true, // 是否输出原图比例
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});

const onClick = () => {
  cropper.value.getCropData(async (data) => {
    // 获取真实输出的图片宽高
    const img = new Image();
    img.onload = () => {
      cropper_width.value = img.width;
      cropper_height.value = img.height;
    };
    img.src = data;
    setTimeout(() => {
      preview(data);
    }, 300);
  });
};

const preview = (img) => {
  ElMessageBox.alert(
    `<img class="cropper_img" src="${img}"/>
      <div class="cropper_img_size">${cropper_width.value}x${cropper_height.value}</div>
    `,
    "截图成功",
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
    }
  );
};
</script>

<style lang="less">
.Com_view {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .box_cropper {
    box-shadow: 0 3px 5px 1px #cfcfcf;
    border: 10px solid white;
    width: 400px;
    height: 400px;
  }
  .box_btn {
    margin-top: 20px;
  }
}
.cropper_img{
  width: 400px;
  height: 400px;
  object-fit: contain;
}
.cropper_img_size{
  text-align: center;
}
</style>

Vue3 - 示例2（按展示的截图框宽高截图、并不按原图比例输出）：

将infoTrue设置成false，截图框宽高将不按原图宽高比例的80%，为容器宽高的80%；并将full设置成false，将会得到跟截图框显示大小一样的宽高截图，反之将full设置成true，截图后的宽高会按原图比例进行缩放；

在这里插入图片描述

<vue-cropper
     ref="cropper"
     :img="option.img"
     :autoCrop="option.autoCrop"
     :full="option.full"
     :infoTrue="option.infoTrue"
     >
</vue-cropper>

const option = reactive({
  img: new URL("./assets/1.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图框
  full: false, // 是否输出原图比例
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});

在这里插入图片描述

const option = reactive({
  img: new URL("./assets/1.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图框
  full: true, // 是否输出原图比例
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});

Vue3 - 示例3（设置图片或截图框是否可移动，固定截图框宽高）：

在这里插入图片描述

<vue-cropper
     ref="cropper"
     :img="option.img"
     :autoCrop="option.autoCrop"
     :canMove="option.canMove"
     :canMoveBox="option.canMoveBox"
     :fixedBox="option.fixedBox"
     >
</vue-cropper>

const option = reactive({
  img: new URL("./assets/1.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图框
  canMove: true, // 图片是否可移动
  canMoveBox: true, // 截图框是否可移动
  fixedBox: false, // 截图框是否固定
});

Vue3 - 示例4（设置图片质量、填充背景颜色、限制输入图片宽高、限制截图框超出图片）：

在这里插入图片描述

<vue-cropper
     ref="cropper"
     :img="option.img"
     :autoCrop="option.autoCrop"
     :outputSize="option.outputSize"
     :fillColor="option.fillColor"
     :centerBox="option.centerBox"
     :maxImgSize="option.maxImgSize"
     >
</vue-cropper>

const option = reactive({
  img: new URL("./assets/1.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图
  outputSize: 1, // 输出图片质量大小 范围：0-1
  fillColor: "", // 导出时背景颜色填充
  centerBox:false, // 截图框是否被限制在图片里面
  maxImgSize: 400, // 限制输入图片最大宽度和高度
});

3. vue-cropper参数：

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址, base64, blob
outputSize	裁剪生成图片的质量	1	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg	(jpg 需要传入jpeg) jpeg, png, webp
info	裁剪框的大小信息	true	true, false
canScale	图片是否允许滚轮缩放	true	true, false
autoCrop	是否默认生成截图框	false	true, false
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	false	true, false
fixedNumber	截图框的宽高比例	[1, 1]	[ 宽度 , 高度 ]
full	是否输出原图比例的截图	false	true, false
fixedBox	固定截图框大小	不允许改变	false
canMove	上传图片是否可以移动	true	true, false
canMoveBox	截图框能否拖动	true	true, false
original	上传图片按照原始比例渲染	false	true, false
centerBox	截图框是否被限制在图片里面	false	true, false
high	是否按照设备的dpr 输出等比例图片	true	true, false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true, false
maxImgSize	限制图片最大宽度和高度	2000	0 ~ max
enlarge	图片根据截图框输出比例倍数	1	0 ~ max(建议不要太大不然会卡死的呢)
mode	图片默认渲染方式	contain	contain , cover, 100px, 100% auto
limitMinSize	限制裁切的最小区域	10	String,Array,Number
fillColor	背景填充颜色	透明	#ffffff …

4. vue-cropper属性和方法：

Vue2：通过 this.$refs.cropper 调用
Vue3：通过 const cropper = ref(“”) 的 cropper 调用

属性

属性	说明
this.$refs.cropper.cropW / cropper.value.cropW	截图框宽度
this.$refs.cropper.cropH / cropper.value.cropH	截图框高度

在这里插入图片描述
方法

方法	说明
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度

点击 startCrop() 就可以在图片中划出截图框！
点击 stopCrop() 则取消划线，点击 clearCrop() 清除截图框；

在这里插入图片描述
获取截图内容

获取截图的 base64 数据

# vue2
this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})

# vue3 
const cropper = ref("");
cropper.value.getCropData(data => {
   // do something
  console.log(data) 
});

获取截图的 blob 数据

# vue2
this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

# vue3 
const cropper = ref("");
cropper.value.getCropBlob(data => {
   // do something
  console.log(data) 
});

以上便是对vue-cropper图片截图组件的详细介绍，有兴趣的小伙伴可以尝试一下并运用到自己的项目当中。

参考链接：
vue-cropper github：vue-cropper github
vue-cropper 全功能演示地址：vue-cropper 全功能演示地址