uniapp框架实现微信小程序一键置换个人证件照底色

Fujj

原文地址：https://blog.csdn.net/weixin_44039406/article/details/119984497

实现过程：

首先用到的是百度云的ai算法模块【人体分析-人体分割】。注册地址https://login.bce.baidu.com/?account=&redirect=http%3A%2F%2Fconsole.bce.baidu.com%2Fai%2F%3F_%3D1629972109997#/ai/body/report/index~appId=2736483

注册比较简单，找到人体分析，先创建应用，根据提示填写完信息就可以了


注册完之后，会生成相应的秘钥


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



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

[JavaScript] 纯文本查看 复制代码

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字段，我们这边转成图片存起来

[JavaScript] 纯文本查看 复制代码

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，然后根据用户的选择生成底色，然后保存成图片

[JavaScript] 纯文本查看 复制代码

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)

总的来说比较简单，
成品可以在微信搜索小程序【常用工具集】尝试

HEYZGQ

大佬，厉害

105050201

谢谢分享

你阿曦

昨天刚搞不定 用ps扣了半天

Fujj

你阿曦 发表于 2021-8-27 15:00
昨天刚搞不定 用ps扣了半天

可以搜一下微信小程序【常用工具集】，成品可以用

emike99

好东西学习一下

第一品霄

学习一下了

qq91308

谢谢分享

Gask

老哥厉害

Gask

老哥厉害