微信小程序版“美图秀秀”源码
使用代码
- 下载并安装微信开发者工具，使用微信号扫码登录开发者工具。
- 打开微信开发者工具，点击“小程序项目”按钮，输入小程序 AppID，项目目录选择下载的代码目录，点击确定创建小程序项目。
- 项目源码下载地址：http://code.662p.com/view/19355.html
功能实现
一、图片裁剪
- 裁剪界面由image组件和裁剪框组成。image组件用来显示用户载入的图片；裁剪框在用户点击裁剪框按钮后浮动显示在图片上，裁剪框的遮罩效果通过背景颜色透明以及盒阴影（box-shadow）实现。
- 在image组件上检测触摸事件，通过事件对象判断触摸点数，单点触摸时通过获取手指移动距离实现图片的自由拖动，两点触摸时，通过获取两点之间的距离计算图片缩放比例，实现图片自由缩放。
- 在裁剪框上检测触摸事件，通过获取手指移动距离实现裁剪框自由拖动；监测裁剪框右下圆点的触摸事件，通过获取手指移动距离计算裁剪框宽、高的增减，实现裁剪框的自由缩放功能。
- 用户裁剪完成（点击右上角√按钮后），根据保存的裁剪框宽、高以及图片缩放比例计算图片真实裁剪区域，根据计算好的区域将图片画在隐藏canvas上，得到裁剪后的图片。
二、添加文字
- 添加文字界面由image组件、text组件和input组件构成。image组件用来显示用户载入的图片。input组件使用绝对定位隐藏在界面之外（left:-9999px）。text组件用来动态演示用户对文字大小、颜色、样式的调整，当用户点击添加按钮后，text组件弹出。在text组件上监测tap事件，用户点击text组件时，使input组件获得焦点从而调出键盘。在text组件上绑定触摸事件，实现text组件的自由拖动。在input组件上绑定input事件，将text组件的内容与用户输入绑定。
- 用户添加文字完成（点击右上角√按钮后），根据保存的text组件定位，文字大小、颜色、样式。将文字写在隐藏canvas上（先画原图片，再写文字），得到添加文字后的图片。
三、涂鸦功能
- 涂鸦界面由canvas组件和image组件构成。在canvas上监测touchmove事件连续画线（ctx.moveTo，ctx.lineTo）实现涂鸦功能。线宽、颜色可以由用户在下方工具栏设置。
- 由于canvas组件在小程序中层级最高，因此采用动态调整canvas高度的方法显示底部工具菜单栏，即调出和隐藏工具栏时，动态改变canvas的高度。
- 为了实现橡皮擦和清除功能（不破坏原图），采用将canvas组件覆盖在image组件上，image组件加载涂鸦前的原图，这样使用橡皮檫时擦掉的区域会显示原图。涂鸦完成后（返回主菜单），先保存canvas得到涂鸦图片，然后在隐藏canvas上先绘制涂鸦前的原图，再绘制涂鸦效果图。就能得到完整的涂鸦后的图片了。
四、拼长图
- 拼长图界面由image组件构成。用户从系统相册选择图片时，将图片的临时路径保存到数组中，而image组件使用列表渲染（wx:for）将数组中的图片全部载入界面，实现拼接的演示效果。在image上绑定longtap事件，长按一张图片后，弹出删除该图片的确认框，确认后在数组中删除该图片的路径，实现删除的演示效果。
- 保存时，将数组中的图片依次画在隐藏canvas上，所有图片宽度保持一致，高度按图片比例缩放，每张图片的定位由图片的宽高、缩放比计算得到。这样就实现的拼长图的功能。
五、拼相框
- 拼相框界面由两个image组件和包裹它们的view组件构成。相框为部分区域透明的图片，加载相框的image组件覆盖在加载照片的组件之上，照片就会透过透明区域显示出来。在view组件上监测触摸事件，实现照片的自由拖动和缩放。相框保存宽度全显，而照片能够动态调整，就能实现拼相框的效果了。
- 保存时，根据照片和相框图片的缩放比例和定位关系，在隐藏canvas中先画照片，再画相框，就就能实现拼相框功能。
六、表情包制作
表情包素材保存在腾讯云存储，进入选择界面后根据链接加载显示缩略图，image使用懒加载，加快素材的渲染。用户选择一个表情素材后，使用wx.downloadFile下载该图片并保存为临时路径。之后的处理实现与添加文字功能相似。
七、保存图片
- 小程序的所有图片保存都使用隐藏的canvas组件（left:-9999px）完成，根据图片的定位、缩放比、裁剪以及添加的文字的效果等数据在隐藏canvas上作图，并导出临时路径以便进一步处理。
- 为了保证图片的质量（图片画在canvas上后像素不降低），隐藏canvas的宽高等于图片的实际宽高。即在画布上调用drawImage之前，使用wx.getImageInfo获取需要画的图片的真实宽高，进而调整隐藏canvas的宽高。
- 用户点击保存按钮后，进入图片预览界面（wx.previewImage），长按图片可选择保存本地相册或者发送给微信朋友。
微信小程序版“美图秀秀”源码相关推荐
- 微信小程序：强大工具箱组合源码
这是一个比较强大的一款工具箱 内有去水印功能(支持几十家平台去水印) 朋友圈功能|(发圈套图等) 头像,朋友圈封面,壁纸等 另外还有快递查询,手持弹幕等 另外还有一个强大的去水印历史记录 历史记录可以 ...
- 微信小程序更换头像的实现源码
微信小程序更换头像的实现源码 html <view class='top_head_border'> <image class='top_head' src='{{head}}'&g ...
- 到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码 微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
- 开源微信小程序自助建站系统源码 含精美的多行业模板和搭建教程
分享一个微信小程序自助建站系统源码,含各行各业的小程序模板和搭建教程,可一键切换模板,自由DIY,搭建属于你自己的小程序. 特色功能一览: 11.支持创建多个小程序!(没有数量限制,后续免费升级) ...
- SSM同城拼车微信小程序的开发 计算机毕设源码20625
摘要 伴随着科技进步和经济全球化,人民生活水乎丕断提高,拥有私家车的人群也越来越庞大.据统计,我国汽车保有量持续高速度增长,众多的车辆上路,是造成交通拥堵的最主要原因.除此之外,随着经济高速发展,城市 ...
- PHP“动能”运动膳食微信小程序的开发 计算机毕业设计源码504978
摘 要 近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷畅通的物流快递.安全的信息保护都使得电子商 ...
- 微信小程序自适应深色主题DarkMode源码
darkmode就是深色主题,也称为黑色主题.这个是系统级别的主题,2020年的时候微信开始支持darkmode,随后微信小程序也开始适配了darkmode,在深色主题模式下,微信小程序会自动根据当前 ...
- 【CSDN下载】第七期：微信小程序跳一跳游戏破解源码、Modbus TCP和TCP通信测试
为便于广大开发者对热门资源的下载需求,下载频道专为广大开发者开辟了推荐一周IT优质资源通道,以供开发者参考下载,同时欢迎大家上传优质资源并留言所需的资源,小编会汇总所需,及时奉上所求. 源码系列 微信 ...
- node.js毕业设计基于微信小程序的健康管理系统（源码+程序+LW+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
最新文章
- Golang 元素值在经过通道传递时会被复制，这个复制是浅复制
- SQL优化--inner、left join替换in、not in、except
- 11.13. Highslide
- 24、HTML 属性
- 1500Vdc的光伏系统距离大规模应用还有多远？
- roads 构筑极致用户体验_长安马自达「悦马星空」计划上线，为用户带来极致服务体验...
- Castor xsd生成java_java – Castor可以处理从基础XSD导入的多个XSD生成类吗？
- 通过常用监控命令快速发现性能问题
- python函数模块关键代码_从零开始学Python(六):函数,模块和类的使用
- django url 中的namespace详解
- 深入浅出MySQL crash safe
- 软件测试基础 (一): 单元测试
- Ragel——基于有限状态机用于产生源码的编译器
- TCP通讯中发送文件
- 【畅销书】浪潮之巅--吴军
- 折腾小记（***+云盘选择+个人环境配置）
- 邮件中CC和BCC的含义
- 贤者之路，Tensorrt的int8 calibration创建
- University's Little_Mess Note(more) [李园7舍_404]
- 推荐一款网购神器高佣联盟APP，适用个人自用兼职，自媒体等