找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 仿微信拖动、缩放图片截取头像的小程序页面

[复制链接]
查看: 1305|回复: 183
最佳答案
0 

3

主题

3

帖子

80

积分

新人求带

积分
80
 楼主| 发表于 2019-1-14 16:30:57 | 显示全部楼层 |阅读模式
仿微信截取头像的小程序截图工具

cropper_page.jpg

整体思路:

  • 实现图片的缩放和拖动;
  • 在图片上方盖上中间镂空的半透明遮罩;
  • 截取方框区域的图片。截图时,在方框区域将截取的图片绘制出来,然后使用wx.canvasToTempFilePath截取图片。


实现过程和遇到的问题:

  • 实现缩放和拖动最初是使用touchStart和touhMove,处理触摸事件来实现图片的缩放和拖动,但是这样的实现在小程序上会很卡。后来无意中发现了小程序提供的movable-area和movable-view可以很方便地实现控件的拖动和缩放。
  • 使用canvas绘制图片上方的半透明遮罩,最初我是把canvas放在movable-aread的上方,也就是在wxml文件中排在movable-area后面,这样会导致图片监听不了拖动事件和缩放事件。后来我将canvas前置,利用小程序中canvas在最上层的特点,实现遮罩,而又不影响图片的拖动和缩放。
  • 使用给canvas设置rgb(0,0,0,0.5)来实现canvas的半透明,而不是使用其opacity属性。因为在小程序中实现截图,需要先通过canvas将图片绘制出来。如果使用opacity绘制出来的图片也是半透明的,由于尺寸的误差,canvas绘制的图片和后面显示的图片会出现重影,效果不佳。
  • canvas不对底部栏覆盖。我这里是使用绝对定位,canvas相对屏幕底部120rpx,底部栏的高度正好也是120rpx。这里也可以使用其他方法实现。
  • canvas准确绘制要截取的图片。关键在于以下几个参数:源图片的大小尺寸,当前图片显示的尺寸、方框在显示的图片中的位置和大小。而方框在显示的图片中的位置又是通过方框和显示的图片分别相对于屏幕的位置得到。根据方框在显示图片中的位置和显示图片的尺寸求得一个比例,然后乘以源图片的位置,就拿到了方框在源图片中的位置和大小。
  • 在实现原微信截图终端"还原"的问题,在小程序上缩放和拖动不能同时进行,一步到位。具体原因在代码注释中有解释。
  • 解决截取图片拿不到文件的问题。重要的是要对canvas绘制图片加上监听,在canvas绘制图片完成后才提取图片文件。


依然存在的问题

  • 由于js计算的尺寸上的误差,用canvas绘制的图片和显示的图片会有个垂直方向上的轻微偏移。所以在点击完成时会有视觉上的头像移动的现象。这个误差的消除我还没仔细研究,如果网友有什么好的办法,可以告诉我。
  • 前面也提到了,点击“撤销”(微信里叫“还原”),只能分两步撤销拖动和缩放,回到原来的位置。
  • 受限于movable-area图片拖动能超出边界的范围不多,这应该可以通过放大movable-area解决,不过这样的话后面的一系列定位算法都要更改。网友有需要的话可以自己实现。

wx-avatar-cropper-master.zip (86.17 KB, 下载次数: 46)
回复

使用道具 举报

最佳答案
0 

0

主题

53

帖子

70

积分

等待验证会员

积分
70
发表于 2019-1-15 11:43:41 | 显示全部楼层
不错的功能
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

97

帖子

112

积分

等待验证会员

积分
112
发表于 2019-1-15 12:49:57 | 显示全部楼层
微信小程序开发
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

97

帖子

112

积分

等待验证会员

积分
112
发表于 2019-1-15 12:50:00 | 显示全部楼层
微信小程序开发
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

97

帖子

112

积分

等待验证会员

积分
112
发表于 2019-1-15 12:50:03 | 显示全部楼层
微信小程序开发
回复 支持 反对

使用道具 举报

最佳答案
0 

5

主题

453

帖子

959

积分

略知一二

积分
959
发表于 2019-1-15 12:56:03 | 显示全部楼层
6666带走了学习一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

439

帖子

1110

积分

专家路上

积分
1110
发表于 2019-1-15 16:40:36 | 显示全部楼层
感谢分享!!!
回复

使用道具 举报

最佳答案
0 

0

主题

54

帖子

100

积分

等待验证会员

积分
100
发表于 2019-1-16 10:12:40 | 显示全部楼层
good,看看能不能用喽
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1446

帖子

842

积分

略知一二

积分
842
发表于 2019-1-16 10:23:25 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1446

帖子

842

积分

略知一二

积分
842
发表于 2019-1-16 10:23:25 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com