- 发现开源小程序之美一，个人博客小程序 https://developers.weixin.qq.com/community/develop/article/doc/000a40e13ec550274e2a9addd56413
- 发现开源小程序之美二，微慕WordPress小程序 https://developers.weixin.qq.com/community/develop/article/doc/000c44945dc728ab9c2aff2a55b013
- 发现开源小程序之美三，抽奖助手小程序 https://developers.weixin.qq.com/community/develop/article/doc/0002846854056847b66a2d13451013
- 发现开源小程序之美四，在线答题小程序 https://developers.weixin.qq.com/community/develop/article/doc/00040af07005609a223acee0151413
- 发现开源小程序之美五，营销组件库 https://developers.weixin.qq.com/community/develop/article/doc/000c4235c98740a1dc2a1a6045b013
- 发现开源小程序之美六，酱茄小程序 https://developers.weixin.qq.com/community/develop/article/doc/00040ede6d0388082a3aeb49b57813
- 发现开源小程序之美七，二手书商场 https://developers.weixin.qq.com/community/develop/article/doc/0006ceb61a87182a4b3a1b32a5bc13
- 发现开源小程序之美八，我要戴口罩
先体验下
我要戴口罩
😷 珍爱生命，从我做起
采用微信小程序编写 实现了为头像戴上口罩的功能
基于 jasscia/ChristmasHat，在其上进行了魔改。
扫码预览
小程序截图
1
2
3
4
5
6
小程序技术实现（摘自 jasscia/ChristmasHat）
程序结构
- image (在此放置所有圣诞帽的素材)
- pages (包含了 index imageeditor combine 文件夹，每个文件夹中都有四个文件，后缀名分别为 .js .json .wxss .wxml)index (第一步：选择底图，程序设计三个底图来源 即微信头像、相机、相册)
- imageeditor(第二步：实现选择圣诞帽 并通过移动和旋转调整圣诞帽的大小和位置)
- combine(第三步：将底图和调整后的圣诞帽合成新的图片 并保存至微信相册)
- app.js
- app.json
- app.wxss
- project.config.json
核心算法介绍
- 核心算法 1:怎么实现 帽子的实时转动当 touchstart 时，保存此时的 touch 起始点，并以此时的底图和帽子位置作为旋转角度和缩放比例值计算的参考点
- 当 touchmove 时，根据起始点 和 临时的终止点 计算在 x/y 方向上的移动距离，计算参考点分别 加上这个距离，得到移动后的位置，通过移动前后的位置 计算移动前后位置的变动 计算旋转角和缩放比例
- 当 touchend 时，重置底图和帽子的位置及旋转角和缩放比例
- 核心算法 2:怎么实现 合成图片(利用 canvas)首先绘制底图（根据屏幕大小、图片大小计算左上角和右下角坐标）
- 绘制帽子（计算最终帽子的大小及中心位置 旋转角度,移动画布原点到帽子的中心位置，旋转画布 并绘制帽子）
项目依赖
小程序git主页
https://github.com/idealclover/Wear-A-Mask
小程序：快快戴口罩
采用微信小程序编写，实现了自动为头像戴上口罩的功能。
源码地址：https://github.com/hi-our/hi-face
主要功能
扫码预览
微信搜一搜：快快戴口罩
小程序截图
程序说明
- taro/ 小程序版，基于tarojssrc/image/ 在此放置所有口罩的素材
- pages/wear-a-mask 口罩功能页面
- thanks 致谢页面
- spread-game 病毒模拟演化器
- cloud/functions/analyze-face 腾讯云人脸识别效果
- client/ react版本，基于face-api.js
- 核心算法：怎么识别人脸五官信息网页中：可以调用 face-api.js 来获取
- 小程序：与网页中canvas不一致，无法直接使用 face-api.js，可以将其放在nodejs中调用，或者使用腾讯云的人脸五官分析，每月免费额度10000次
- 如何裁剪图片微信头像：正方形小图，无需裁剪
- 拍照或图库选择：使用
- 核心算法：怎么实现口罩的实时转动当 touchstart 时，保存此时的 touch 起始点，并以此时的底图和口罩位置作为旋转角度和缩放比例值计算的参考点
- 当 touchmove 时，根据起始点 和 临时的终止点 计算在 x/y 方向上的移动距离，计算参考点分别 加上这个距离，得到移动后的位置，通过移动前后的位置 计算移动前后位置的变动 计算旋转角和缩放比例
- 当 touchend 时，重置底图和口罩的位置及旋转角和缩放比例
- 核心算法：怎么实现 合成图片(利用 canvas)首先绘制底图（根据屏幕大小、图片大小计算左上角和右下角坐标）
- 绘制口罩（计算最终口罩的大小及中心位置 旋转角度,移动画布原点到口罩的中心位置，旋转画布 并绘制口罩）
- 小程序：我要戴口罩，idealclover/Wear-A-Mask
- 自动圣诞帽：christmas-hat
- 自动识别人脸示例：bnk48-face-recognition
- 小程序圣诞帽：jasscia/ChristmasHat
- face-api.js https://github.com/justadudewhohacks/face-api.js
- 腾讯云人脸识别： https://cloud.tencent.com/product/facerecognition
- Tarojs版本图片裁剪：https://www.npmjs.com/package/taro-cropper
- 病毒演化模拟器 https://qqqdu.oss-cn-beijing.aliyuncs.com/index.html
项目主要文件
核心算法介绍
taro-cropper参考项目
你的账号都5级啦
怎么这么厉害啊