以下两个小程序是成品，大家可以扫一下先，
进入小程序后，找到【证件照换底色】的模块，上传照片后，先选择底色，再点击换色按钮，就可以一键置换证件照底色，比较方便快捷

接下来讲下实现过程：

首先用到的是百度云的ai算法模块【人体分析-人体分割】。

注册地址：https://login.bce.baidu.com/?account=& amp;redirect=http%3A%2F%2Fconsole.bce.baidu.com%2Fai%2F%3F_%3D1629972109997#/ai/body/report/index~appId=2736483

注册比较简单，找到人体分析，先创建应用，根据提示填写完信息就可以了
注册完之后，会生成相应的秘钥

然后再领取下免费资源，领取之后大概30分钟左右生效，免费调用10000次

接下来就可以开工了

本次实现涉及到的小程序框架是：uniapp，所有逻辑均为前端实现
大致逻辑是：
1.先获取百度云ai人体分割的token秘钥
2.图片转化成二进制上传到百度云ai接口
3.获取百度云返回的切割后的图片
4.前端使用Canvas创建背景色画布
5.背景色画布和切割图片合并

先画样式

这里就没什么好说了，附上样式代码

<template>
        <view class="">
                <view class="border" @click="chosefile">
                        <view class="border1" v-if="flag">
                                <image class="photo" src="/static/bgcolor/upfile.png" mode="widthFix"></image>
                                <text class="text">点击上传图片</text>
                        </view>
                        <view class="border1" wx:else>
                                <canvas canvas-id="myCanvas" class="photo2" :style="{'height': picH+'px'}"></canvas>
                                <text class="text">点击图片重新上传</text>
                        </view>
                </view>
                <view class="box3">
                        <text class="color_text">请选择背景色</text>
                        <radio-group class="changecolor" @change="colorchange">
                                <radio value="red" color="#fe0000"><view class="color1"></view></radio>
                                <radio value="blue" color="#428eda"><view class="color2"></view></radio>
                                <radio value="white" color="#ffffff"><view class="color3"></view></radio>
                        </radio-group>
                </view>
                <view class="anniu" @click="upfile"><button class="anniu1">点击换色</button></view>
                <view class="anniu" @click="save"><button class="anniu1">点击保存</button></view>
        </view>
</template>		

先获取百度云token，比较简单一个get就搞定了，会用到前面创建的百度云人体分割应用

uni.request({ 
            url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=（创建应用时候的API Key）&client_secret=(创建应用时的Secret Key);
            method: 'GET',
            success: res => { 
                this.uppic(res.data['access_token'], wx.arrayBufferToBase64(aa.readFileSync(this.tempFilePaths[0])));
                                }
                        });

把本地的图片上传到百度云ai接口，用到上个接口返回的access_token，百度云会直接返回一张切割后的图，放在foreground字段，我们这边转成图片存起来

uni.request({ 
       url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg',
       method: 'POST',
       header: {  'content-type': 'application/x-www-form-urlencoded' },
       data: {  image: pic, access_token: tk },
       success: res => { 
       let url = 'data:image/png;base64,' + res.data.foreground;
       aa.writeFile({ 
       filePath: wx.env.USER_DATA_PATH + '/test.png',
       data: url.slice(22),
       encoding: 'base64',
       success: res => { 
              this.tempFilePaths = [wx.env.USER_DATA_PATH + '/test.png'];
              this.canvasImgFun();
              uni.hideLoading();
              uni.showToast({ 
              title: '上传成功'
                                });
                                                },
              fail: err => { 
                     console.log(err);
                                                }
                                        });
                                },
              fail: res => { 
                     console.log(res);
                                }
                        });

上面样式里面用了Canvas，我们把保存后的图片直接渲染进Canvas，然后根据用户的选择生成底色，然后保存成图片

save() { 
                        if (this.tempFilePaths[0] != wx.env.USER_DATA_PATH + '/test.png') { 
                                uni.showToast({ 
                                        title: '换色后再保存',
                                        icon:'none'
                                })
                                return
                        }
                        uni.canvasToTempFilePath({ 
                            canvasId: 'myCanvas',
                                fileType: 'jpg',
                            success: function(res) { 
                                uni.saveImageToPhotosAlbum({ 
                                        filePath: res.tempFilePath,
                                        success: function(res) { 
                                                uni.showToast({ 
                                                        title: '保存成功',
                                                });
                                        },
                                        fail: function(err) { 
                                                console.log(err);
                                        }
                                });
                            },
                            fail:function(err){ 
                                console.log(err)
                                uni.hideLoading()
                            }
                        },this)