“拍照不行,滤镜来凑”,美颜滤镜已经成了用户拍照的必备操作。那么如此常见的美颜技术要怎样才能应用在小程序中呢?
本次文章将进行基于小程序·云开发和腾讯云AI智能图像服务的【智能美颜相册小程序开发】实战演练,并于8月22日(周四)线上直播教学。(参与方式在文末)
基础知识点
1、小程序·云开发的介绍
“小程序·云开发”由微信团队和腾讯云联合打造的“应用服务中台”,秉承高效、易用、安全、低成本的服务理念,整合了微信公众平台和腾讯云的核心技术,提供云数据库、云存储、云函数、日志和监控等开发运维能力。通过“小程序·云开发”,开发者可无缝安全调用小程序的开放服务,提升开发效率,快速试错和落地产品。
2、腾讯云AI服务的介绍
这次开发应用了一个“新朋友”——AI技术。我们这次应用的是腾讯云AI服务的人脸识别技术,能够对图片和视频源中面部特征进行提取分析。它可实现精准的人脸检测和人脸识别,涵盖人脸检测与分析、五官定位、人脸对比与搜索、跨年龄人脸识别等。
准备工作
云开发服务的开通相信大家都有所了解,那么我们重点来介绍一下AI项目的配置步骤。
1、下载并导入AI项目的源代码
下载解压源代码压缩包后,可以看到 tcb-Demo-AICamera-master⽂件夹下有两个⽂件夹分别为init(放置着项目的完整代码)和intact(此次活动的实战代码)。
点击开发者工具工具栏项目-导入项目,项目名称可以任意填写比如“AI 人脸识别”,项目路径为你之前建好的AICamera文件夹下tcb-Demo-AICamera里面的 intact文件夹。
2、配置AI项目
配置项目的环境ID,打开client文件夹里的app.js,找到如下代码,填写一下你自己的环境ID。
wx.cloud.init({
traceUser: true,
envId: "learn-snoop"
});
打开云开发控制台,在数据库管理页新建⼀个pictures集合,然后将pictures集合的权限设置为所有⽤户可读,仅创建者可读写。
搭建步骤
一切准备就绪后,就来进行搭建。此次实战,需要借助人脸特征分析与检测扩展能力来实现人脸特征分析(颜值打分、年龄、性别等),借助云函数给照片添加滤镜,以及借助云存储和数据库来⽣成相册。
1、上传图片到云存储功能
使用微信开发者工具打开client/utils/index.js将下面的代码复制粘贴到第11行处,添加了之后,上传人脸的按钮就可以使用啦,点击上传人脸,选择⼀张照片,就会把该照片上传到云存储里。
wx.cloud.uploadFile({
cloudPath,
filePath: fileName,
success: res => {
resolve(res);
},
fail: () => {
wx.hideLoading();
reject();
}
});
这段代码主要是使用wx.cloud.uploadFile将本地资源上传到云存储空间。
2、调用AI分析与人脸检测云函数
使用微信开发者工具打开pages/detect/index.js,将下面的代码复制粘贴到第100行 处,也就是粘贴到callFunction()函数的try{}内:
let { result } = await wx.cloud.callFunction({
name: "tcbService-ai-detectFace",
data: {
FileID: this.data.fileID
}
});
wx.hideLoading();
if (!result.code && result.data) {
this.setData(
{
faceRects: this.getFaceRects(result.data)
},
() => {
this.triggerEvent("finish", result.data);
}
);
} else {
throw result;
}
这段函数主要是调用tcbService-ai-detectFace云函数。
3、照片的滤镜处理
这部分受篇幅限制并不展开讲,我们将在直播上详细讲解如何添加滤镜。
4、将智能裁剪的照片信息提交到云数据库
使用微信开发者工具打开pages/clip/index.js将代码粘贴到第155行处:
let { fileID } = await uploadImage(tempFilePath);
let db = wx.cloud.database();
let collection = db.collection("pictures");
if (!collection) {
throw {
message: "需创建集合 pictures"
};
}
await collection.add({
data: {
origin: this.data.fileID,
output: fileID,
createdTime: new Date().getTime()
}
});
这段代码是将照片的fileID、创建时间保存到pictures集合之中,主要用到的是给云数 据库指定结合新增记录的知识。
5、获取云端存储的图片列表
使用微信开发者工具打开pages/history/index.js将下面代码粘贴到第19行处。
let { data } = await collection
.orderBy("createdTime", "desc")
.limit(20)
.get();
this.setData({
list: data.reduce((list, { origin, output }) => {
list.push(origin);
list.push(output);
return list;
}, [])
});
这段代码的意思是根据照片的创建时间进行降序排序,选前20张。
参与直播
搭建过程大致是这样,但还有一些细节没有在文章提及。关于项目的具体实操,我们将在8月22日(周四)20:00进行直播演练,欢迎大家扫码进微信群,获取源码包和参与课程交流。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。