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

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


微信极客WeGeek
283 声望64 粉丝