交互式网站和非交互式网站成都微信小程序分类信息开发

系列文章目录

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

成品演示

项目背景说明

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

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

1）原图

2）二值图

3）灰度图

3）目标图

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

基础配置

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

https://aip.baidubce.com

*复制备用好的appid

申请百度接口

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

API	状态	请求地址	调用量限制	QPS限制
人像分割	付费使用	https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg	5万次/天赠送 + 超出按量计费	10

创建应用如图：

保存好百度给的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参数：

参数	值
access_token	通过API Key和Secret Key获取的access_token，参考“Access Token获取”

Header如下：

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

参数	值
Content-Type	application/x-www-form-urlencoded

请求参数

参数	是否必选	类型	可选值范围	说明
image	是	string	-	图像数据，base64编码后进行urlencode，要求base64编码和urlencode后大小不超过4M。图片的base64编码是不包含图片头的，如(data:image/jpg;base64,)，支持图片格式：jpg、bmp、png，最短边至少50px，最长边最大4096px
type	否	string	labelmap,scoremap,foreground	可以通过设置type参数，自主设置返回哪些结果图，避免造成带宽的浪费1）可选值说明：labelmap - 二值图像，需二次处理方能查看分割效果scoremap - 人像前景灰度图foreground - 人像前景抠图，透明背景2）type 参数值可以是可选值的组合，用逗号分隔；如果无此参数默认输出全部3类结果图

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用于放默认图片“+”

<view style="width: 300rpx;height: 600rpx;display: flex;align-items: center;justify-content: center;flex-direction: row;"bindtap="add_img" class="saveimg">
<view style="width: 420rpx;height: 500rpx;border: 1px solid black;display: flex;flex-direction:column;justify-content: center;align-items: center;"><view style="width: 460rpx;height: 500rpx;display: flex;flex-direction:column;align-items: center;justify-content: center;" wx:if="{{is_tp}}">
<view style="width:80rpx;height:80rpx;font-size: 80px;margin: 0 auto;color: #EEE5E1;">+</view>
</view>
<view style="width: 460rpx;height: 500rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;" wx:else><canvas canvas-id="firstCanva" class="firstCanvas" style="width: 160px;height: 230px;"></canvas><!-- //预览 --><view style='width:0px;height:0px;overflow:hidden;position:fixed;padding-left:9000px;'><canvas canvas-id="firstCanvas" class="firstCanvas" style="width: {{imgwidth}}px;height: {{imgheight}}px;"></canvas><!-- //实际输出 -->
</view>
<!-- Canvas 2D组件 --><!-- 保存按钮 --></view></view></view>

预览图：

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

bindtap=“add_img”

我们在js中构造方法：

  add_img:function(){},

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

wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}

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

临时路径如下

转换

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

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

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

that.urlTobase64(tempFilePaths);

转换后如下：

获取到了后通过baidu_方法进行数据传输
*我这里通过将封装好的方法放到PHP上去了，这样就可以在调用的时候访问access_token了，因为我可以直接从服务器读取redis里面的access_token

这里因为项目代码可以diy所以仅提供一个思路
转换成功后返回base64数据，通过setStorageSync将数据进行缓存（缓存数据最大只能10M）

 wx.setStorageSync('new_base64', res.data)

处理后图片渲染

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

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

将返回的数据最前面加上

data:image/jpeg;base64,

通过网站将base64转换为图片

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

转换图片到本地：

//将base64图片转本地图片
let that=this;
var tt=wx.getStorageSync('new_base64')
var fsm = wx.getFileSystemManager();
var filePath = wx.env.USER_DATA_PATH + '/share_img'  + '.png';
var buffer = wx.base64ToArrayBuffer(tt);

临时路径：

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

    let that=this;var ww_tmp=wx.getStorageSync('tmp_img_data');var tmp_url=wx.getStorageSync('tmp_url');// 使用 wx.createContext 获取绘图上下文 contextvar context = wx.createCanvasContext('firstCanva')// 设置边框颜色context.setStrokeStyle("#fff")// 设置边框粗细context.setLineWidth(0)// 设置背景颜色context.setFillStyle(color)context.fillRect(0,0,160,230)// 将人像绘制上去context.drawImage(tmp_url,0,0,160,230)// 创建一个矩形context.rect(0, 0, 160,230)context.stroke()context.draw()

效果

颜色绘制

设计颜色选择器

wxml代码

<view style="width: auto;height: 200rpx;">
<view style="width: auto;height: 200rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;">
<view style="width: 170rpx;height: 180rpx;display: flex;flex-direction: row;display: flex;flex-direction: column;align-items: center;justify-content: center;" bindtap="color_c" data-id="#FFFFFF">
<view style="width: 170rpx;height: 170rpx;background-color:#FFFFFF;border-radius: 50%;"></view>
</view>
<view style="width: 170rpx;height: 180rpx;display: flex;flex-direction: row;margin-left: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"bindtap="color_c" data-id="#428EDA">
<view style="width: 170rpx;height: 170rpx;background-color:RGB(52,151,232);border-radius: 50%;"></view>
</view>
<view style="width: 170rpx;height: 180rpx;display: flex;flex-direction: row;margin-left: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"bindtap="color_c" data-id="#98CBEC">
<view style="width: 170rpx;height: 170rpx;background-color:RGB(152,203,236);border-radius: 50%;"></view>
</view>
<view style="width: 170rpx;height: 180rpx;display: flex;flex-direction: row;margin-left: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"bindtap="color_c" data-id="#FE0000">
<view style="width: 170rpx;height: 170rpx;background-color:RGB(205,26,53);border-radius: 50%;"></view>
</view>
</view>
</view>

颜色选中事件

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

  color_c:function(color){
let that=this;
that.huanse(color);
that.huans(color);},

渲染选中的颜色

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

huanse: function (color) {// console.log(color.currentTarget.dataset.id);if(color==undefined){color='#fff'}else{color=color.currentTarget.dataset.id}let that=this;var ww_tmp=wx.getStorageSync('tmp_img_data');var tmp_url=wx.getStorageSync('tmp_url');// 使用 wx.createContext 获取绘图上下文 contextvar context = wx.createCanvasContext('firstCanvas')// 设置边框颜色context.setStrokeStyle("#fff")// 设置边框粗细context.setLineWidth(0)// 设置背景颜色context.setFillStyle(color)context.fillRect(0,0,ww_tmp.width,ww_tmp.height)// 将人像绘制上去context.drawImage(tmp_url,0,0,ww_tmp.width,ww_tmp.height)// 创建一个矩形context.rect(0, 0, ww_tmp.width,ww_tmp.height)context.stroke()context.draw()that.setData({is_tp:false})},

保存

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

<button bindtap="watch_ad" type="primary" style="margin-top: 10rpx;">保存到相册</button>

js代码：

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

 wx.showModal({title: '提示',content: '保存需要观看完整视频',success: function(res) {if (res.confirm) {if (videoAd) {videoAd.show().catch(err => {// 失败重试videoAd.load().then(() => videoAd.show())})}console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})

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

总结

以上就是我们本次的开发项目实战，也是第一次项目实战，对照片换底小程序进行详细的叙述，代码的实现很简单，只需要会调用，学会处理接口的数据就行，最后业务的需求根据自身的能力和想法进行优化即可，以上！