【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发

【零基础微信小程序入门开发】小程序介绍及环境搭建 【零基础微信小程序入门开发】配置小程序 【零基础微信小程序入门开发】小程序框架一 【零基础微信小程序入门开发】小程序框架二 【零基础微信小程序入门开发】基础能力（一） 【零基础微信小程序入门开发】基础能力（二） 👉照片换底小程序实战开发

通过小程序配合百度的人体分割接口进行简单的照片渲染，本期做一个小工具，对学生党、工作人员、打印店铺以及涉及到求职简历办公等需求的人员都很有用，这个项目由于一些原因不再做维护了，于是打算出个教程将证件照小程序分享给大家，这里采用百度AI接口是因为现在网上开源的py脚本对边缘计算不是很优秀，会有很多模糊点没办法处理，识别人体的轮廓范围，与背景进行分离，适用于拍照背景替换、照片合成、身体特效等场景。输入正常人像图片，返回分割后的二值结果图、灰度图、透明背景的人像图（png格式）；并输出画面中的人数、人体坐标信息，可基于此对图片进行过滤、筛选。百度在这方便做得很好，细致化到发丝，并且免费！！

我们来看下人像分割是啥意思？ 举个例子：

1）原图

2）二值图

3）灰度图

3）目标图 目标的图片是一张透明图，通过透明图，加上小程序的canvas渲染就可以得到一张换了背景的图片，这个程序原理就是这样，实现的算法都在百度，我们只需要调用拼接就可以

注册好小程序后，将后端合法域名设置添加

https://aip.baidubce.com

*备用好的appid

地址在这里，注册找到 【人体分析】，创建应用后添加【人像分割】 这里呢每天有免费的额度够大家用了

创建应用如图： 保存好百度给的appid 和key等这些参数

我们已经获取到了人像分割识别接口：

https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg

那怎么使用呢？

我们先看下官方给的请求示例：

HTTP 方法：POST

请求URL： https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg

URL参数：

Header如下：

(这里一定要按照文档的要求来 不然会出错)

请求参数

access_token获得方法

请求URL数据格式，向授权服务地址

https://aip.baidubce.com/oauth/2.0/token

发送请求（推荐使用POST），并在URL中带上以下参数：

grant_type： 必须参数，固定为client_credentials； client_id： 必须参数，应用的API Key； client_secret： 必须参数，应用的Secret Key；

注： API Key、Secret Key 均可在百度智能云控制台 应用列表 处获取，若无应用请先进行创建； API Key、Secret Key用于接口调用鉴权，请务必注意保密，不可在公开文档或代码中以明文展示，否则可能导致账号被盗用。

与自己的密钥拼接后（例如）：

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHlA4Fq5eR3LT0vuXV4&client_secret=0rDSjzQ20XUj5itV6WRtznPQSzr5pVw2&

这里呢，access_token有效期是30天，大家可以用定时任务每几天触发一次，然后存取到redis即可，这样就避免了每次使用都需要去调用的情况

这里大家新建一个新的项目即可，我这里直接导入了

通过wxml渲染一个基本功能 基本功能包含的控件，图片控件、按钮，完整的样式图如下：

构建一个view用于放默认图片“+”

预览图：

现在开始设计js事件,通过上方的bindtap事件

bindtap=“add_img”

我们在js中构造方法：

当用户点击上传后，需要一个选择图片的操作 所以：

通过这一步即可获取到图片的临时路径res.tempFilePaths 临时路径如下

获取到上传图片信息后，因为百度的接口中已经说明了，只能用base64编码且大小不能超过4M

图像数据，base64编码后进行urlencode，要求base64编码和urlencode后大小不超过4M。图片的base64编码是不包含图片头的，如(data:image/jpg;base64,)，支持图片格式：jpg、bmp、png，最短边至少50px，最长边最大4096px

所以我们现在需要将临时图片转换为base64编码，通过调用第三方js进行处理

转换后如下： 获取到了后通过baidu_方法进行数据传输 *我这里通过将封装好的方法放到PHP上去了，这样就可以在调用的时候访问access_token了，因为我可以直接从服务器读取redis里面的access_token 这里因为项目代码可以diy所以仅提供一个思路 转换成功后返回base64数据，通过setStorageSync将数据进行缓存（缓存数据最大只能10M）

获取到新的数据后 我们一下百度返回的base64码

打开浏览器通过这个工具：base64图片转换

将返回的数据最前面加上

data:image/jpeg;base64,

通过网站将base64转换为图片

发现图片是一张处理后的透明图，这里就说明我们上面的流程已经完整运行了，接下来只需要将base64转换为图片即可，通过小程序将base64逆向转换为图片存在本地生成一个临时路径通过canvas完成对颜色的渲染绘画最后保存下来即可

转换图片到本地：

临时路径：

转换后保存到缓存通过canvas渲染到前端

效果

wxml代码

在js构造方法（这里有两个是因为一个是输出的图像，一个是给用户看的展示到前端的）

通过颜色的选择结合百度分割后的图片绘制

因为小程序有激励广告费可以赚取，所以我们在这里可以加一个广告激励时间，通过判断观看完整来执行代码 wxml代码

js代码：

加一个模态窗口，用于询问

canvas渲染绘制放在onload事件即可