Vue 3 图片裁剪神器 - vue-cropper@next 完整使用指南 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

简介

vue-cropper@next 是一个专为 Vue 3 设计的优雅图片裁剪插件，基于 Cropper.js 开发。它提供了丰富的配置选项和简单易用的 API，支持多种图片格式的裁剪功能。

安装

npm install vue-cropper@next
# or
yarn add vue-cropper@next

快速开始

全局引入

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { VueCropper } from "vue-cropper";
import "vue-cropper/dist/index.css";

const app = createApp(App);
app.use(VueCropper);
app.mount("#app");

基础示例

<template>
  <div class="cropper-container">
    <!-- 图片裁剪组件 -->
    <vue-cropper
      ref="cropperRef"
      :img="option.img"
      :outputSize="option.outputSize"
      :outputType="option.outputType"
      :info="option.info"
      :canScale="option.canScale"
      :autoCrop="option.autoCrop"
      :autoCropWidth="option.autoCropWidth"
      :autoCropHeight="option.autoCropHeight"
      :fixed="option.fixed"
      :fixedNumber="option.fixedNumber"
      @realTime="realTime"
      @imgLoad="imgLoad"
      style="width: 100%; height: 400px"
    ></vue-cropper>

    <!-- 控制按钮 -->
    <div class="btn-group">
      <button @click="startCrop">开始裁剪</button>
      <button @click="stopCrop">停止裁剪</button>
      <button @click="clearCrop">清除裁剪</button>
      <button @click="getCropData">获取裁剪结果</button>
    </div>

    <!-- 实时预览 -->
    <div class="preview-box">
      <div class="preview" :style="previews.div">
        <img :src="previews.url" :style="previews.img" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { VueCropper } from "vue-cropper";
import "vue-cropper/dist/index.css";

// 定义组件名称
defineOptions({
  name: "CropperDemo",
});

// 模板引用
const cropperRef = ref(null);

// 响应式数据
const option = reactive({
  img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4", // 裁剪图片的地址
  outputSize: 1, // 裁剪生成图片的质量(0.1-1)
  outputType: "jpeg", // 裁剪生成图片的格式
  info: true, // 显示裁剪框的大小信息
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 300, // 默认生成截图框宽度
  autoCropHeight: 200, // 默认生成截图框高度
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [3, 2], // 截图框的宽高比例
});

const previews = ref({});

// 方法定义
// 实时预览
const realTime = (data) => {
  previews.value = data;
};

// 图片加载完成
const imgLoad = (msg) => {
  console.log("图片加载:", msg);
};

// 开始裁剪
const startCrop = () => {
  cropperRef.value.startCrop();
};

// 停止裁剪
const stopCrop = () => {
  cropperRef.value.stopCrop();
};

// 清除裁剪
const clearCrop = () => {
  cropperRef.value.clearCrop();
};

// 获取裁剪结果
const getCropData = () => {
  // 获取base64数据
  cropperRef.value.getCropData((data) => {
    console.log("Base64结果:", data);
  });

  // 获取blob数据
  cropperRef.value.getCropBlob((data) => {
    console.log("Blob结果:", data);
  });
};
</script>

<style scoped>
.cropper-container {
  max-width: 800px;
  margin: 0 auto;
}

.btn-group {
  margin: 20px 0;
  text-align: center;
}

.btn-group button {
  margin: 0 5px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-group button:hover {
  background: #0056b3;
}

.preview-box {
  margin-top: 20px;
}

.preview {
  width: 200px;
  height: 133px;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0 auto;
}
</style>

头像裁剪器

该示例源码由于篇幅太长，请线上下载。

免费下载：关注公众号“前端开发技术前沿”，回复：“cropper”即可。

Props 配置

属性名	类型	默认值	说明
img	String	”	裁剪图片的地址，支持 url、base64、blob
outputSize	Number	1	裁剪生成图片的质量，范围 0.1-1
outputType	String	‘jpg’	裁剪生成图片的格式，可选 jpeg、png、webp
info	Boolean	true	是否显示裁剪框的大小信息
canScale	Boolean	true	图片是否允许滚轮缩放
autoCrop	Boolean	false	是否默认生成截图框
autoCropWidth	Number	容器的 80%	默认生成截图框宽度
autoCropHeight	Number	容器的 80%	默认生成截图框高度
fixed	Boolean	false	是否开启截图框宽高固定比例
fixedNumber	Array	[1, 1]	截图框的宽高比例，开启 fixed 时生效
full	Boolean	false	是否输出原图比例的截图
fixedBox	Boolean	false	固定截图框大小，不允许改变
canMove	Boolean	true	上传图片是否可以移动
canMoveBox	Boolean	true	截图框能否拖动
original	Boolean	false	上传图片按照原始比例渲染
centerBox	Boolean	false	截图框是否被限制在图片里面
height	Boolean	true	是否按照设备的 dpr 输出等比例图片
infoTrue	Boolean	false	true 为展示真实输出图片宽高，false 展示看到的截图框宽高
maxImgSize	Number	2000	限制图片最大宽度和高度
enlarge	Number	1	图片根据截图框输出比例倍数
mode	String	‘contain’	图片默认渲染方式，可选 contain、cover、100px、100% auto
limitMinSize	Number/Array/String	10	裁剪框限制最小区域
fillColor	String	”	导出时背景颜色填充，如 #ffffff、white

事件

事件名	参数	说明
realTime	data	实时预览事件，返回裁剪框的实时数据
imgMoving	data	图片移动回调函数
cropMoving	data	截图框移动回调函数
imgLoad	msg	图片加载的回调，返回 success 或 error

realTime 事件示例

realTime(data) {
  // data 包含以下属性：
  // w: 裁剪框宽度
  // h: 裁剪框高度
  // x: 裁剪框x坐标
  // y: 裁剪框y坐标
  // div: 裁剪框的样式对象
  // img: 图片的样式对象
  // url: 裁剪后的图片url

  console.log('裁剪框宽度:', data.w)
  console.log('裁剪框高度:', data.h)
  console.log('裁剪框位置:', data.x, data.y)
}

方法

通过 cropperRef.value 调用以下方法：

方法名	参数	说明
startCrop()	–	开始截图
stopCrop()	–	停止截图
clearCrop()	–	清除截图
changeScale(num)	num: Number	修改图片大小，正数为变大，负数变小
getImgAxis()	–	获取图片基于容器的坐标点
getCropAxis()	–	获取截图框基于容器的坐标点
goAutoCrop()	–	自动生成截图框
rotateRight()	–	向右旋转 90 度
rotateLeft()	–	向左旋转 90 度
getCropData(callback)	callback: Function	获取截图的 base64 数据
getCropBlob(callback)	callback: Function	获取截图的 blob 数据

方法使用示例

import { ref } from "vue";

const cropper = ref(null);

const startCropping = () => cropper.value.startCrop();
const stopCropping = () => cropper.value.stopCrop();
const clearCropping = () => cropper.value.clearCrop();
const changeScale = (num) => cropper.value.changeScale(num);
const getImgAxis = () => cropper.value.getImgAxis();
const getCropAxis = () => cropper.value.getCropAxis();
const goAutoCrop = () => cropper.value.goAutoCrop();
const rotateRight = () => cropper.value.rotateRight();
const rotateLeft = () => cropper.value.rotateLeft();
const getCropData = (callback) => cropper.value.getCropData(callback);
const getCropBlob = (callback) => cropper.value.getCropBlob(callback);

属性

通过 cropperRef.value 访问以下属性：

属性名	类型	说明
cropW	Number	截图框宽度
cropH	Number	截图框高度

注意事项

容器尺寸: 需要为裁剪组件设置明确的宽高，否则可能无法正常显示
图片格式: 支持 jpeg、png、webp 等常见图片格式
文件大小: 建议限制上传图片的大小，避免内存占用过大
移动端适配: 组件支持移动端触摸操作
浏览器兼容: 需要支持 Canvas API 的现代浏览器

常见问题

Q: 裁剪后的图片质量如何控制？

A: 通过 outputSize 属性控制，范围 0.1-1，数值越大质量越高。

Q: 如何设置固定的裁剪比例？

A: 设置 fixed: true 和 fixedNumber: [width, height]，如 [1, 1] 表示正方形。

Q: 如何获取裁剪后的文件用于上传？

A: 使用 getCropBlob() 方法获取 Blob 对象，然后创建 FormData 进行上传。

Q: 裁剪框可以自定义样式吗？

A: 可以通过 CSS 自定义裁剪框的样式，组件提供了相应的类名。

资源下载

下载价格1 码币

注意：本网站资源属于虚拟产品，不支持退款。请谨慎购买！购买后资源无法下载，请联系客服QQ：844475003，微信号：th844475003。

原文链接：https://code.ifrontend.net/archives/1318，转载请注明出处。

Vue 3 图片裁剪神器 – vue-cropper@next 完整使用指南

简介

安装

快速开始

全局引入

基础示例

头像裁剪器

Props 配置

事件

realTime 事件示例

方法

方法使用示例

属性

注意事项

常见问题

Q: 裁剪后的图片质量如何控制？

Q: 如何设置固定的裁剪比例？

Q: 如何获取裁剪后的文件用于上传？

Q: 裁剪框可以自定义样式吗？

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Vue 3 图片裁剪神器 – vue-cropper@next 完整使用指南

简介

安装

快速开始

全局引入

基础示例

头像裁剪器

Props 配置

事件

realTime 事件示例

方法

方法使用示例

属性

注意事项

常见问题

Q: 裁剪后的图片质量如何控制？

Q: 如何设置固定的裁剪比例？

Q: 如何获取裁剪后的文件用于上传？

Q: 裁剪框可以自定义样式吗？

猜你喜欢

Vue 3 项目必学：ScrollReveal 滚动动画库集成与优化指南

智能调研分析平台 – 响应式设计+滚动动画，为企业提供精准市场洞察

轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/vue3

Vue3 实现刮刮卡抽奖游戏

Vue3 实现老虎机抽奖游戏

Vue3 实现砸金蛋抽奖游戏

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部