微信小程序之如何实现一寸照片换底色

原文链接:点击跳转

接下来讲下实现过程:

首先用到的是百度云的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次

接下来就可以开工了

先获取百度云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,然后根据用户的选择生成底色,然后保存成图片

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)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容