位置: 编程技术 - 正文

基于Vue的移动端图片裁剪组件功能(vue做移动端)

编辑:rootadmin

推荐整理分享基于Vue的移动端图片裁剪组件功能(vue做移动端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue移动端案例,vue如何做移动端适配,vue做移动端适配最佳解决方案,亲测有效,vue3移动端,vue做移动端,vue移动端项目实例,基于vue的移动端ui框架,基于vue的移动端框架,内容如对您有帮助,希望把文章链接给更多的朋友!

最近项目上要做一个车牌识别的功能。本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有-%。因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率。刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下。

  Demo地址:  下载地址:  因为移动端是用vue,所以就写成了一个vue组件,下面就说说自己的一些实现思路(本人技术有限,各位大神请体谅。另外展示的代码不一定是某个功能的完整代码),先看看效果: 

 

  一、组件的初始化参数

  1、图片img(url或者base data-url)

  2、截图的宽clipperImgWidth

  3、截图的高clipperImgHeight

  二、布局

  在Z轴方向看主要是由4层组成。第1层是一个占满整个容器的canvas(称cCanvas);第2层是一个有透明度的遮罩层;第3层是裁剪的区域(示例图中的白色方框),里面包含一个与裁剪区域大小相等的canvas(称pCanvas);第4层是一个透明层gesture-mask,用作绑定touchstart,touchmove,touchend事件。其中两个canvas都会加载同一张图片,只是起始坐标不一样。为什么需要两个canvas?因为想做出当手指离开屏幕时,裁剪区域外的部分表面会有一个遮罩层的效果,这样能突出裁剪区域的内容。

  三、初始化canvas

  canvas绘制的图片在hdpi显示屏上会出现模糊,具体原因这里不作分析,可以参考下这里。我这里的做法是让canvas的width与height为其css width/height的devicePixelRatio倍,以及调用canvas api时所传入的参数都要乘以window.devicePixelRatio。最后还要记录一下两个canvas坐标原点的x, y差值(originXDiff与originYDiff)。如下

  四、加载图片

  加载图片比较简单,首先是创建一个Image对象并监听器onload事件(因为加载的图片有可能是跨域的,因此要设置其crossOrigin属性为Anonymous,然后服务器上要设置Access-Control-Allow-Origin响应头)。加载的图片如果宽高大于容器的宽高,要对其进行缩小处理。最后垂直水平居中显示()(这里注意的是要保存图片绘制前的宽高值,因为日后缩放图片是以该值为基础再乘以缩放倍率,这里取imgStartWidth,imgStartHeight)如下

   五、绘制图片

  下面的_drawImage有四个参数,分别是图片对应cCanvas的x,y坐标以及图片目前的宽高w,h。函数首先会清空两个canvas的内容,方法是重新设置canvas的宽高。然后更新组件实例中对应的值,最后再调用两个canvas的drawImage去绘制图片。对于pCanvas来说,其绘制的图片坐标值为x,y减去对应的originXDiff与originYDiff(其实相当于切换坐标系显示而已,因此只需要减去两个坐标系原点的x,y差值即可)。看看代码

   六、移动图片

  移动图片实现非常简单,首先给gesture-mask绑定touchstart,touchmove,touchend事件,下面分别介绍这三个事件的内容

  首先定义四个变量scx, scy(手指的起始坐标),iX,iY(图片目前的坐标,相对于cCanvas)。

基于Vue的移动端图片裁剪组件功能(vue做移动端)

  1、touchstart

    方法很简单,就是获取touches[0]的pageX,pageY来更新scx与scy以及更新iX与iY

  2、touchmove

    获取touches[0]的pageX,声明变量f1x存放,移动后的x坐标等于iX + f1x - scx,y坐标同理,最后调用_drawImage来更新图片。

  看看代码吧

   七、缩放图片(这里不作特别说明的坐标都是相对于cCanvas坐标系)

  绘制缩放后的图片无非需要4个参数,缩放后图片左上角的坐标以及宽高。求宽高相对好办,宽高等于imgStartWidth * 缩放比率与imgstartHeight * 缩放倍率(imgStartWidth ,imgstartHeight 上文第四节有提到)。接下来就是求缩放倍率的问题了,首先在touchstart事件上求取两手指间的距离d1;然后在touchmove事件上继续求取两手指间的距离d2,当前缩放倍率= 初始缩放倍率 + (d2-d1) / 步长(例如每px算0.1),touchend事件上让初始缩放倍率=当前缩放倍率。

  至于如何求取缩放后图片左上角的坐标值,在草稿纸上画来画去,画了很久......终于有点眉目。首先要找到一个缩放中心(这里做法是取双指的中点坐标,但是这个坐标必须要位于图片上,如果不在图片上,则取图片上离该中点坐标最近的点),然后存在下面这个等式

  (缩放中心x坐标 - 缩放后图片左上角x坐标)/ 缩放后图片的宽度 = (缩放中心x坐标 - 缩放前图片左上角x坐标)/ 缩放前图片的宽度;(y坐标同理)

  接下来看看下面这个例子(在visio找了很久都没有画坐标系的功能,所以只能手工画了)

  

  绿色框是一张*5的图片,蓝色框是宽高放大两倍后的图片*,根据上面的公式推算的x2 = sx - w2(sx - x1) / w1,y2 = sy - h2(sy - y1) / h1。

  坚持...继续看看代码吧

  说明一下fingers是干嘛的,是用来记录当前有多少只手指在屏幕上触摸。可能会出现这种情况,双指缩放后,其中一只手指移出显示屏,而另外一个手指在显示屏上移动。针对这种情况,要在touchend事件上根据e.changedTouches来移除fingers里已经离开显示屏的finger,如果此时fingers里只剩下一个finger,则更新scx,scy,iX,iY为移动图片做初始化准备。

  八、裁剪图片

  这里很简单,就调用pCanvas的toDataURL方法就可以了

  总结

  上面只是列出了一些自己认为比较关键的点, 如果有兴趣的,可以到我的github上下载源码看看。

以上所述是小编给大家介绍的基于Vue的移动端图片裁剪组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

基于vue2实现上拉加载功能 本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下因为我们项目中,还用了swiper。很多都是滑动切换的,但是又得上

Vue2仿淘宝实现省市区三级联动 三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里

vue2实现数据请求显示loading图 一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失。这个,一般只需要在封装的axios中写入js事件即可。当然

标签: vue做移动端

本文链接地址:https://www.jiuchutong.com/biancheng/378916.html 转载请保留说明!

上一篇:基于Vue框架vux组件库实现上拉刷新功能(基于vue的ui框架)

下一篇:基于vue2实现上拉加载功能(vue2.x)

  • 小规模纳税人的条件
  • 金税三期是什么意思
  • 所得税申报表的营业收入包括营业外收入吗
  • 受雇于两家公司个税怎么汇算清缴
  • 所得税汇算清缴后发现有误怎么办
  • 发票勾选是否为转内销凭证是什么意思
  • 生产能量计入固定成本
  • 收购公司财务如何管理
  • 转让企业全部产权属于增值税征税范围。A对B错
  • 土地增值税预征管理办法
  • 资产负债表的应付职工薪酬怎么填
  • 公司利润如何提取避税
  • 用于购买固定资产的账户
  • 可供出售债权投资
  • 经营性租出固定资产的租金收入计入
  • 增值税失控发票什么意思
  • 物业管理公司如何纳税
  • 计算房产税时容积率怎么算
  • 生活垃圾处理项目基础金融产品包括
  • 营改增后视同销售的税务处理怎么做?
  • 兼职人员个税起征点
  • 个人帮公司买东西怎么报销
  • 专项储备属于什么科目代码
  • 材料采购差异的影响因素
  • 公司注销退回投资款如何账务处理
  • microsoft word安装
  • u启动u盘怎么装系统
  • 退回多缴的所得税怎么算
  • 应付债券包括
  • element分页器
  • 贝特希金斯
  • Request获取请求数据中文乱码问题
  • WINDOWS10系统怎样给电脑分区
  • 基于Perclos&改进YOLOv7的疲劳驾驶DMS检测系统(源码&教程)
  • 企业购买预付卡怎么做账
  • Ubuntu18.04安装cuda10.2
  • css如何应用
  • pgadmin配置
  • 房地产转让条例最新
  • 职工薪酬在利润表哪里看
  • 终止经营净利润含义
  • python中类的属性
  • 帝国cms使用手册
  • 民办非企业单位属于什么类型
  • 个人开具工程款发票
  • 将房产以股权形式出售
  • 扶贫资金是如何发放的
  • 发放工资代扣个人所得税的记账凭证怎么填
  • 一般纳税人的月销售额是多少可以不用交增值税
  • 结转费用后利润怎么算
  • 工程预付款入账
  • 职工福利费如何计提
  • 其他应付款的有
  • 劳务派遣税率是多少2023
  • 企业生育津贴发放细则
  • 银行承兑汇票记载事项
  • 代扣代缴完税凭证抵扣期限
  • 取得投资时支付的相关税费
  • 如何理解会计含义
  • 私企做会计风险大吗
  • sql中的存储过程
  • windows 隐藏软件
  • win10磁盘占用100%卡死
  • 国产系统麒麟和统信
  • 为什么win7系统盘会自动满
  • WIN10系统打开IE浏览器断网
  • win10输入法设置快捷键
  • 网页shell命令
  • Unity Spine Skeleton Animation 2D骨骼动画 For Game 介绍
  • 实用的批处理
  • js 队列
  • Python中的字典用法
  • 上海各区税务大厅
  • 非贸付汇代扣代缴企业所得税
  • ppr管材税收编码
  • 安徽省国家税务局网
  • 火车报销凭证丢了还能退款吗
  • 印花税由哪方缴纳
  • 盐城滨海人口
  • 怎样才能做好企业总经理?谈谈你的看法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设