小程序·云开发实战结合AI实现智能美颜相册

五十米深蓝

- 腾讯云大学重磅打造 -
小程序学习路径课-小程序·云开发实战结合AI实现智能美颜相册
从微信小程序到小程序云开发体系化课程，玩转小程序不同案例场景！

讲师简介

王伟嘉

腾讯云研发工程师

毕业于复旦大学电子工程系，目前在腾讯云云开发团队负责小程序·云开发、云开发Web服务的设计和研发





简介

美颜滤镜已经成了用户拍照的必备操作。那么如此常见的美颜技术要怎样才能应用在小程序中呢？本课程将基于小程序·云开发和腾讯云AI智能图像服务的【智能美颜相册小程序开发】实战演练。

课程讲义

小程序·云开发的介绍

“小程序·云开发”由微信团队和腾讯云联合打造的“应用服务中台”，秉承高效、易用、安全、低成本的服务理念，整合了微信公众平台和腾讯云的核心技术，提供云数据库、云存储、云函数、日志和监控等开发运维能力。通过“小程序·云开发”，开发者可无缝安全调用小程序的开放服务，提升开发效率，快速试错和落地产品。

腾讯云AI服务的介绍

这次开发应用了一个“新朋友”——AI技术。我们这次应用的是腾讯云AI服务的人脸识别技术，能够对图片和视频源中面部特征进行提取分析。它可实现精准的人脸检测和人脸识别，涵盖人脸检测与分析、五官定位、人脸对比与搜索、跨年龄人脸识别等。

“拍照技术不够，美颜滤镜来凑！”，美颜滤镜已经成了越来越多用户拍照的必备工具。那么如此常见的美颜技术要怎样才能应用在小程序中呢？如何用小程序·云开发结合AI技术制作出颜值与实力并存的智能美颜相册小程序?

本期腾讯云大学大咖分享邀请腾讯云研发工程师 王伟嘉 ，将基于小程序·云开发和腾讯云AI智能图像服务的【智能美颜相册小程序开发】实战演练。

本次分享内容：

1、基础知识讲解

2、小程序功能解析

3、实战步骤

1. 基础知识讲解

程序开发就是通常的业务开发中，经常会遇到一个问题是有很多业务逻辑是要处理的，而且不仅仅是业务逻辑，还有很多比如一些基础设施相关东西，文件存储、数据库的冷备热备要自己搭建处理。这就导致开发效率并不是非常高，没有办法专注于自己的业务代码，而是你要去考虑很多这种很底层的东西。

这样也就造成了人力物力成本非常高，比如说你要开发一个小程序，或者说一个网站的后台，可能要从买一台物理机开始，然后到在上面搭建容器的服务，还有搭建一些微服务，从最底层的硬件开始一直到上面的服务维护都要你自己来完成，所以这样成本非常高。

另外一点，前后端分离这种模式，一定是会不可避免一件事情，就是联调，想象中很美好，大家前端和后台把文档写好，大家按照文档分开实现，但是事实上做开发都会知道，联调实际上是件非常痛苦的事情，就是可能接口参数没有对齐，或者接口出现了bug，然后要debug，这个时候找bug非常难，因为涉及到可能是两个团队甚至多个团队的问题就导致了效率非常低。

所以这时候我们云开发团队想了一个问题，就是说是不是可以有一种全新的一种开发模式可以让开发者更专注业务逻辑，就是它可以更专注的写自己的业务代码不需要去在乎更多这种底层的关系和一些基础设施，这是我们小程序云开发的一个初衷。小程序云开发是腾讯云和微信团队一起联合联合开发的一个一站式的后端的云服务，其实就是全栈开发，只要你是一个前端开发，其实你也可以很轻易的去开发后端的逻辑。

小程序云开发特点：

• 免运维，因为它整个云服务都是没有服务器概念的。没有服务器这概念说明不需要去维护服务器。可以不需要域名备案，因为你都是用我们提供的功能的域名，还可以天然的自带一些弹性伸缩的能力，比如说你的小程序可能有一段时间就是那个流量进来非常大，这时候你不用手动扩容了，我们会自动为你进行弹性伸缩。
• 简单易用，我们SDK的话，设计上来讲还是封装很多，把很多复杂东西都封装进去了，然后用起来体验应该是要比那种原生接口要好很多的。
• 与web管理平台无缝对接，现在其实云开发的话，不只应用于小程序，也应用于web端，所以如果你想为你的那个小程序写一个这种基于web基于网页的一个管理后台的话，其实也是完全可以实现的。
  

小程序云开发能力，现在提供五大块的能力：

• 云函数，就是你可以写一个函数，然后把函数部署在云端，然后这个在云端的函数，可以去访问一些后台的一些服务，或者自己开发提供的一些服务，或者自己的数据库。在一个云数里面学实现你自己的逻辑。
• 数据库，数据库很简单就是存储数据，你可以使用我们提供的sdk来操作，一个数据库，完全不需要去自己维护一套数据库的服务了，直接用使用我们提供的接口就可以。
• 存储，你可以直接在把文件上传到云开发的储存里，然后它会直接分配给你一个cdn链接，可以通过cdn来访问到你的这个文件，就对于那些跟图片上传相关的一些小程序来讲，是非常有用的。这个储存能力，今天我们就会用到，会先把这个图片先上传到cdn上，然后再去调用一个原函数。去向cdn拉取图片，然后进行一个人脸识别。
• 云调用，可能做微信开发同学会比较了解，微信自己提供一套api，有一套开放接口，但是这套开放接口调用起来，其实是有一点复杂的，因为它是需要服务端来下发一个token，然后你才能拿这个token去调用真正的微信的接口。但是，如果你的小程序中，想使用微信接口的话，你可以直接使用我们云调用能力，你完全不需要自己去搭一套这种转发token的这种服务，可以直接使用云调用直接调用微信的开放接口。
• HTTP API，如果你觉得我们现有的能力不能满足的话，你也可以通过http api来实现你自己的逻辑自定义你一些服务。
  

这是一个快速开始，怎么样可以在小程序里面开通一个云开发，其实非常简单，开微信开发者工具上面有一个按钮就是云开发的按钮，只要点开之后去选择，首先问的环境选写一个名字，然后你自己自定一个id，选择一个版本的环境，我们现在是有免费版应该是够用的，然后当然你想要很大的量的话，你就可以使用收费版，部署成功之后你的这个环境，就算是开通了。

小程序云开发的无服务开发模式，助力快速上线小程序。对比传统开发和云开发模式，传统开发模式下需要考虑弹性伸缩、异地容灾、网络防护等，还需完成自己的业务逻辑，而在云开发模式下，这些需要考虑的东西通通由腾讯云基础服务处理了，开发者只需要考虑自己的业务逻辑，大大降低了工作量。

以小程序文件上传功能为样例，具体对比云开发和传统开发，在传统开发模式中需要在小程序端使用选择图片API和上传文件API，在后端需要搭建框架、路由和上传到腾讯云对象存储的逻辑，在运维上还需考虑性能和安全方面的问题，需要前端、后台和运维进行配合，在该功能上总耗时至少1142分钟。在云开发模式下，只需要在小程序端使用图片API结合云开发封装的wx.cloud.uploadFile的API，指定存储路径以及文件路径即可完成图片上传的，整个过程耗时只需4分钟，并且只需要前端即可完成。

插入数据到数据库功能，在传统开发模式中，需要在小程序端使用wx.request API，后端也要搭建框架、路由，实现插入数据到腾讯云MongoDB实例的逻辑，在运维上还需考虑性能和安全方面的问题。传统开发模式下，需要前端、后端和运维岗位进行配合，在该功能上总耗时至少1021分钟。在云开发模式中，使用云函数实现插入数据到运输局库中，仅需要在小程序端使用wx.cloud.Functon API去调用云函数，将需要添加的数据传递给云函数，即可完成添加，整个过程只需3分钟，也只需要一名前端即可完成该功能点。

2. 小程序功能解析

智能美颜小程序功能拆解成主要四个：

允许用户本地拍照/上传图片，然后可以调用ai的接口，可以获得颜值评分。

允许用户可以通过滤镜的算法来美化图片。

允许用户通过智能裁剪，获得最优图像比例。

将图片保存至云端相册中，也就是云开发的存储中。

3. 实战步骤

任务一：开启小程序云开发模板

任务二：调用人脸检测与分析函数，实现颜值评分功能

任务三：为小程序添加怀旧、毛玻璃滤镜功能

任务四：利用云开发的数据库实现相片存储功能

任务五：实现智能裁剪功能

源码：https://github.com/TencentCloudBase/Cloudbase-Examples/tree/master/miniprogram/tcb-demo-AICamera/intact