vue pc端裁剪图片 16:9或者其他比例 vue-cropper

最新推荐文章于 2025-05-04 13:01:27 发布

原创最新推荐文章于 2025-05-04 13:01:27 发布 · 841 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍如何使用Vue-cropper插件实现图片裁剪功能。包括安装步骤、引入及注册插件的方法，并详细展示了如何配置参数以达到理想的裁剪效果。此外还提供了几个常用的方法，如旋转图片和获取裁剪后的图片数据。

1:下载剪切插件

npm install vue-cropper

2:使用方法
（1）引入插件

import { VueCropper } from'vue-cropper

（2）注册插件

components: {
VueCropper,
}

（3）标签中使用

<vueCropper
ref="cropper"
:img="option.img"
:centerBox="option.centerBox"
:autoCrop="option.autoCrop"
:fixedNumber="option.fixedNumber"
:outputType="option.outputType"
:canMove="option.canMove"
:fixed="option.fixed"
></vueCropper>

（4）data中关于vueCropper的api

option: {
img:'', // 裁剪图片的地址
info:true, // 裁剪框的大小信息
outputSize:1, // 剪切后的图片质量（0.1-1）
full:false, // 输出原图比例截图 props名full
outputType:'jpg', // 裁剪生成额图片的格式
canMove:false, // 能否拖动图片
original:false, // 上传图片是否显示原始宽高
canMoveBox:true, // 能否拖动截图框
autoCrop:true, // 是否默认生成截图框
autoCropWidth:740, // 默认生成截图框宽度
autoCropHeight:400, // 默认生成截图框高度
fixedBox:true, // 截图框固定大小
fixedNumber: [16, 9],（截图框宽高比，fixed必须为true才生效）
fixed:true, //是否开启截图框宽高固定比例
centerBox:true,// 截图框是否被限制在图片里面 
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
 },

（5）方法的使用

//图片左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft()
 },
//图片 右旋转
rotateRight() {
this.$refs.cropper.rotateRight()
 },
//图片 重置
refresh() {
this.$refs.cropper.refresh()
 },
//截图
getCropData() {
this.$refs.cropper.getCropData((data) => {
this.imgUrl = data//获得bsae64图片地址
 })
 },