“拍照不行，滤镜来凑”，美颜滤镜已经成了用户拍照的必备操作。那么如此常见的美颜技术要怎样才能应用在小程序中呢？

本次文章将进行基于小程序·云开发和腾讯云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进行直播演练，欢迎大家扫码进微信群，获取源码包和参与课程交流。