当前位置: 首页 > news >正文

vue3+vant+cropper.js实现移动端图片裁剪功能

一、前言

最近做项目中遇到一个需求,需要对海报图片按照一定的比例进行裁剪并上传到oss。一开始这个需求思路有两个,使用canvas原生或者寻找现成的第三方库,对比了一番觉得canvas实现时间耗费较长,且秉承着不重复造轮子的原则(其实是菜)。

在进行技术调研后,决定使用vue-cropper插件来实现,预想会顺利,可结果恰恰相反!安装vue-cropper设置参数封装完组件后,发现裁剪框和裁剪的图片在h5页面上不能拖动,在web页面上可以,看源码里面也有兼容移动端的方法代码,在github上的issue里面也没发现有人遇到相同问题,难道就我遇到了?问度娘发现大家都可以,为什么我的就不行呢?后来又使用了vue-cropper-h5,也存在各种问题。其实,vue-cropper、vue-cropper-h5、vue-cropperjs等插件都是基于cropper.js实现的,最终决定使用cropper.js去实现。官方封装了很多参数、方法、事件,上手容易,文档阅读体验较好、而且便于扩展。下面就来详细介绍一个cropper.js的详细用法吧!

cropper.js可以对指定的图片进行裁剪,可以自己选择裁剪的交互方式,如大小、纵横比等,裁剪后可以生成一个包含裁剪图的canvas对象,借助canvas的toDataURL方法可以生成一张Base64格式的图片,再通过toBlob转换成blob类型文件,再通过new File(),转换成file文件上传,当然也可以直接上传裁剪后生成的base64。还有另外一种不使用canvas的方式,利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据,使用这些数据进行css绝对定位即可展示裁剪后的图,该方式可以保证图片不失真和完整。

二、项目环境

1.node

v16.0.0

2.vue

"vue": "^3.2.45"

3.vant

"vant": "^4.0.2"

4.cropper.js

"cropperjs": "^1.5.13"

三、使用

1.安装

yarn add cropperjs

2.引入,要导入样式,不然不会生效

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'

3.模板

<div class="v-simple-cropper"><van-uploader:after-read="afterRead"><template #default><img v-if="imgUrl" class="upload-img" :src="imgUrl" alt=""><div v-else class="upload-area" /></template></van-uploader><div v-show="showlayer" class="v-cropper-layer"><van-row class="layer-header" :gutter="36"><van-col :span="8"><van-button type="danger" plain block size="small" @click="cancelHandle">取消</van-button></van-col><van-col :span="8"><van-button type="success" block size="small" @click="rotateHandle">旋转</van-button></van-col><van-col :span="8"><van-button type="primary" block size="small" @click="confirmHandle">裁剪并上传</van-button></van-col></van-row><img ref="cropperImg"></div></div>
</template>

4.js

<script setup lang="ts">
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
import { onMounted, ref, watch } from 'vue'
import { closeToast, showFailToast, showLoadingToast, showToast } from 'vant'
import { useRequest } from 'vue-request'
import { fileUpload } from '@/api/basic/index'const props = defineProps({url: {type: String,default: '',},width: {type: Number,},height: {type: Number,},scale: {type: Number,default: 0.8}
})
const emit = defineEmits(['update:url'])const cropperImg = ref<any>(null)
const cropper = ref<any>(null)
const showlayer = ref(false)
const imgUrl = ref(props.url)watch(() => props.url, (val) => {if (val)imgUrl.value = val
})function init() {cropper.value = new Cropper(cropperImg.value, {viewMode: 1,// 根据所需图片宽高,计算比例aspectRatio: props.width && props.height ? (Number(props.width) / Number(props.height)) : 1 / 0.618,dragMode: 'move',cropBoxResizable: false,autoCropArea: 1,})
}
// 选择图片
function afterRead(file) {// 判断扩展名const tmpCnt = file.file.name.lastIndexOf('.')const exName = file.file.name.substring(tmpCnt + 1)const names = ['jpg', 'jpeg', 'png']if (!names.includes(exName)) {showToast('不支持的格式!')return}const URL = window.URL || window.webkitURLconst binaryData = []binaryData.push(file.file)cropper.value.replace(URL.createObjectURL(new Blob(binaryData)))showlayer.value = true
}// 旋转
function rotateHandle() {cropper.value.rotate(90)
}
function cancelHandle() {cropper.value.reset()showlayer.value = false
}
// 上传方法
const { run: runUplaod } = useRequest(fileUpload, {manual: true,onSuccess: (res) => {closeToast()imgUrl.value = res.imgUrlemit('update:url', res.imgUrl)},onError: (err) => {closeToast()showFailToast(err.message)},
})
// 裁剪并上传
function confirmHandle() {const cropBox = cropper.value.getCropBoxData();const scale = props.scale || 1;cropper.value.getCroppedCanvas({width: cropBox.width * scale,height: cropBox.height * scale,})// 把裁剪的图片转换成blob类型文件,在通过new File(),转换成file文件.toBlob(async (blob) => {// 重置file的name,以时间戳作为文件名const timeString = new Date().getTime()const imgFile = new File([blob], `${timeString}.jpg`, {type: 'image/jepg',})showlayer.value = falseshowLoadingToast({message: '上传中...',duration: 0,forbidClick: true,})runUplaod(imgFile)})
}onMounted(() => {init()
})
</script>

5.style

<style lang="less" scoped>
.v-simple-cropper {text-align: center;padding-top: 10px;.upload-area {width: 190px;height: 120px;background: url('@/assets/bg-upload-box.png');background-size: 100% 100%;}.upload-img {width: 190px;height: 120px;}/deep/.van-uploader__upload {margin: 0 !important;}.v-cropper-layer {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: #fff;z-index: 200;.layer-header {position: absolute;bottom: 0;left: 0;z-index: 200;width: 100%;padding: 0 16px 12px;box-sizing: border-box;}img {position: inherit !important;border-radius: inherit !important;float: inherit !important;}}
}
</style>

在上面的代码中,我们使用了cropperjs组件来实现图片裁剪功能。在afterRead方法中,我们获取用户上传的图片,并将其转换为URL对象。在confirmHandle方法中,我们使用getCroppedCanvas方法获取裁剪后的canvas对象,并使用toBlob方法将其转换为Blob对象,最后将其转换为File对象并上传oss,返回一个oss url。

四、其他

1.预览功能

上面创建cropper的时候,我们可以在选项中添加了如下代码实现预览功能。

preview:[document.querySelector('.previewBox'), document.querySelector('.previewBoxRound')
]

preview就是用来设置我们需要实时预览的地方,但是设置完成之后要给上述的两个div添加一下样式,才可以正常显示。

.previewBox {box-shadow: 0 0 5px #adadad;width: 100px;height: 100px;margin-top: 30px;/*这个超出设置为隐藏很重要,否则就会整个显示出来了*/overflow: hidden;      
}

2. 官方文档

(1)官网示例

https://fengyuanchen.github.io/cropper/

(2)官方github文档

https://github.com/fengyuanchen/cropperjs

(3)npm官方网站

https://www.npmjs.com/package/cropper

相关文章:

vue3+vant+cropper.js实现移动端图片裁剪功能

一、前言 最近做项目中遇到一个需求&#xff0c;需要对海报图片按照一定的比例进行裁剪并上传到oss。一开始这个需求思路有两个&#xff0c;使用canvas原生或者寻找现成的第三方库&#xff0c;对比了一番觉得canvas实现时间耗费较长&#xff0c;且秉承着不重复造轮子的原则&am…...

springCould中的Bus-从小白开始【11】

目录 &#x1f9c2;1.Bus是什么❤️❤️❤️ &#x1f32d;2.什么是总线❤️❤️❤️ &#x1f953;3.rabbitmq❤️❤️❤️ &#x1f95e;4.新建模块3366❤️❤️❤️ &#x1f373;5.设计思想 ❤️❤️❤️ &#x1f37f;6.添加消息总线的支持❤️❤️❤️ &#x1f9…...

xshell和xftp

1.xshell和xftp的关系 Xftp和Xshell都是Xmanager Power Suite的组件&#xff0c;它们的功能和用途有所不同。 Xshell是一个用于MS Windows平台的强大的SSH、telnet和rlogin终端仿真软件&#xff0c;它使得用户能轻松和安全地从Windows PC上访问Unix/Linux主机。 Xftp是一个用…...

python for...else用法,一个实例就能让你明白

直接上代码&#xff0c;很简单&#xff0c;不用讲解吧&#xff0c;看不懂的话&#xff0c;就需要补充下基础知识了。 def funct2():for i in range(4):try:assert i>2print("success")breakexcept Exception as e:print(error)continueelse:print(循环不合预期)d…...

windows 设置ip命令bat脚本

您可以使用以下命令创建一个批处理文件&#xff08;.bat&#xff09;来添加IP地址&#xff1a; echo off set ipaddress set subnetmask set gatewaynetsh interface ip set address name"以太网" sourcestatic address%ipaddress% mask%subnetmask% gateway%gatewa…...

Openharmony 对应Android内存查看

众所周知&#xff0c;内存查看是一个很重要的部分&#xff0c;大多数情况&#xff0c;我们都是使用dumpsys的方法对android的内存进行查看&#xff0c;但是对于openharmony而言好像又不太一样了。 Android内存查看 命令行&#xff1a; adb shell dumpsys meminfo <packag…...

R语言【paleobioDB】——pbdb_interval():通过ID选择,返回一个地层年代段的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_interval (id, ...) Arguments 参数【id】…...

spring boot mybatis plus mapper如何自动注册到spring bean容器

##Import(AutoConfiguredMapperScannerRegistrar.class) ##注册MapperScannerConfigurer ##MapperScannerConfigurer.postProcessBeanDefinitionRegistry方法扫描注册mapper ##找到mapper候选者 ##过滤mapper 类 候选者 ##BeanDefinitionHolder注册到spring 容器...

What is `@PathVariable` does?

PathVariable 是SpringMVC中的注解&#xff0c;用于将HTTP请求的URI路径变量映射到Controller方法参数上。 当URL路径中包含占位符&#xff08;由大括号 {} 包围的部分&#xff09;时&#xff0c;可以使用此注解来绑定这些动态部分到方法参数。 使用样例 获取单个路径变量 …...

如何利用小程序介绍公司品牌形象?

企业小程序的建设对于现代企业来说已经成为了一项必不可少的工作。随着移动互联网的快速发展&#xff0c;越来越多的职场人士和创业老板希望通过小程序来提升企业形象&#xff0c;增强与用户的互动&#xff0c;实现更好的商业效果。在这个过程中&#xff0c;使用第三方制作平台…...

[C#]使用sdcb.paddleocr部署v4版本ocr识别模型

【官方框架地址】 https://github.com/sdcb/PaddleSharp 【算法介绍】 PaddleOCR&#xff0c;全称为PaddlePaddle OCR&#xff0c;是PaddlePaddle深度学习平台下的一款强大的光学字符识别工具。它利用深度学习技术&#xff0c;实现了高精度的文字识别&#xff0c;可以帮助用户…...

Echarts图表如何利用formatter自定义tooltip的内容和样式

在展示多数据图表的时候 有的时候需要图例也展示出一些内容来&#xff0c;例如官方这样子&#xff1a;鼠标悬停的时候展示该点数据 但是&#xff0c;官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候&#xff0c;只展示该条线的数据&#xff0…...

Ceph源码分析-s->req_id = store->svc()->zone_utils->unique_id(req->id)

s->req_id store->svc()->zone_utils->unique_id(req->id); 涉及到指针和对象方法的调用。我会逐步为你解释这行代码的含义。 s->req_id ...; s 是一个指针&#xff0c;它指向一个结构或类。req_id 是该结构或类的一个成员变量。这行代码的意思是&#xff…...

Unity中的异步编程【7】——在一个异步方法里播放了animation动画,取消任务时,如何停止动画播放

用一个异步方法来播放一个动画&#xff0c;正常情况是&#xff1a;动画播放结束时&#xff0c;异步方法宣告结束。那如果我提前取消这个异步任务&#xff0c;那在这个异步方法里面&#xff0c;我要怎么停止播放呢&#xff1f;&#xff01; 一、播放animation动画的异步实现 1…...

vue3中ref和reactive联系与区别以及如何选择

vue3中ref和reactive区别与联系 区别 1、ref既可定义基本数据类型&#xff0c;也可以定义引用数据类型&#xff0c;reactive只能定义应用数据类型 2、ref在js中取响应值需要使用 .value&#xff0c;而reactive则直接取用既可 3、ref定义的对象通过.value重新分配新对象时依旧…...

面试宝典之spring框架常见面试题

F1、类的反射机制有啥用&#xff1f; &#xff08;1&#xff09;增加程序的灵活性&#xff0c;可扩展性&#xff0c;动态创建对象。 &#xff08;2&#xff09;框架必备&#xff0c;任何框架的封装都要用反射。&#xff08;框架的灵魂&#xff09; F2、获取Class对象的三种方…...

建筑垃圾处理行业分析:正在被越来越广泛的运用

建筑垃圾处理&#xff0c;是将固体废弃物作为再生资源重新利用的一种方式。建筑垃圾是在对建筑物实施新建、改建、扩建或者是拆除过程中产生的固体废弃物。建筑垃圾一般可分为建设废物、拆除垃圾及装修垃圾。因此建筑垃圾处理行业可以分为建设废物处理、拆除垃圾处理、装修垃圾…...

【DIY summaries on Linux】

DIY Linux summaries 1) difference between ways of creation file and edit files1.1) echoecho talk to yourself touch 1) difference between ways of creation file and edit files 1.1) echo ###) > echo talk to yourself touch...

Redis(概述、应用场景、线程模式、数据持久化、数据一致、事务、集群、哨兵、key过期策略、缓存穿透、击穿、雪崩)

目录 Redis概述 应用场景 Redis的线程模式 数据持久化 1.Rdb&#xff08;Redis DataBase&#xff09; 2.Aof&#xff08;Append Only File&#xff09; mysql与redis保持数据一致 redis事务 主从复制&#xff08;Redis集群) 哨兵模式 key过期策略 缓存穿透、击穿、…...

ospf-gre隧道小练习

全网可达,R5路由表没有其他路由器的路由条目 注:每个路由器都添加了自己的环回,如R1就是1.1.1.1 R1可以分别ping通与R2,R3,R4之间的隧道 R1路由表上有所有路由器环回的路由条目 R5路由表上没有其他路由器的路由条目 实现代码: 首先将各个接口IP配好 边上3个路由器:[R6][R7][R…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...