基于微信小程序实现透明背景人像分割功能

网友投稿 504 2023-11-13

−目录一、文章前言二、具体流程及准备三、开发步骤四、完整代码

一、文章前言

此文主要实现识别人体的轮廓范围，与背景进行分离并保存效果图，适用于拍照背景替换及透明背景的人像图（png格式）转换。

二、具体流程及准备

基于微信小程序实现透明背景人像分割功能

2.1、注册百度开放平台及微信公众平台账号。

2.2、-及安装微信Web开发者工具。

2.3、如需通过SDK调用及需准备对应语言的开发工具。

三、开发步骤

2.1、打开微信开发者工具，新建项目，选择不使用模板、不使用云服务。

2.2、在pages文件夹下面创建一个文件夹并新建对应的page文件。

2.3、在js的onLoad事件中请求获取Token的接口，将接口返回access_token存储到该页的变量当中，用于后续请求图像分割的接口凭证。ApiKey和SecretKey建议密文保存。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let that = this;
let ApiKey=;
let SecretKey=;
wx.request({
url: https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id= + ApiKey+&client_secret=+SecretKey,
method: POST,
success: function (res) {
that.setData({
AccessToken:res.data.access_token
});
}
});
},

2.4、随后在wxml和js中实现对应的选择图片及转换base64的功能效果。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let that = this;
wx.chooseImage({
success: function (res) {
that.choiceImg = res.tempFilePaths[0];
wx.getFileSystemManager().readFile({
filePath:res.tempFilePaths[0],
encoding:base64,
success(data){
let baseData = data.data;
that.setData({
choiceImg: res.tempFilePaths[0],
baseData:baseData
})
}
});
}
});

2.5、给图像转换按钮对应的响应事件中绑定开放平台接口，将参数进行拼接传递。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let that = this;
wx.request({
url: https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg?access_token= + that.data.AccessToken,
method: POST,
header: {
content-type: application/x-www-form-urlencoded
},
data:{
image:that.data.baseData
},
success: function (identify) {
that.setData({
imgBase64: identify.data.foreground
})
}
})

2.6、根据接口返回的数据来看，我们先取foreground也就是分割后的人像前景抠图进行展示。

2.7、能够成功将解析后的图片进行展示后，我们将返回的base64格式的图片进行处理然后保存到本地，就可以得到一个透明背景的png，我们可以自己对这个图片进行上色、PS等操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//获取文件管理器对象
const fs = wx.getFileSystemManager()
//文件保存路径
const Imgpath = wx.env.USER_DATA_PATH + /qrcodeImg + .png
//base64图片文件
let imageSrc = this.data.imgBase64.replace(/^data:image\/\w+;base64,/, )
//写入本地文件
fs.writeFile({
filePath: Imgpath,
data: imageSrc,
encoding: base64,
success(res) {
//保存到手机相册
wx.saveImageToPhotosAlbum({
filePath: Imgpath,
success(res) {
wx.showToast({
title: 保存成功,
icon: success
})
},
fail: function(err) {
}
})
}
})

四、完整代码

?
1
2
3
4
5
6
7
8
9
10
<!--index.wxml-->
<view class="containerBox">
<view class="leftBtn" bindtap="loadImage">上传图片</view>
<view class="rightBtn" bindtap="identify">图像转换</view>
</view>
<view >
<image src="{{choiceImg}}" class="showImg"></image>
<image src="data:image/png;base64,{{imgBase64}}" class="showImg"></image>
</view>
<view class="saveBtn" bindtap="saveBtn">保存图片</view>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!--index.wxss-->
.containerBox{
width:750rpx;
display:flex;
height:62rpx;
margin-top:20rpx;
}
.leftBtn{
width:181rpx;
height:62rpx;
color:#4FAFF2;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 158rpx;
}
.rightBtn{
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 73rpx;
background:#4FAFF2;
}
.showImg{
width:415rpx;
height:415rpx;
margin-left:167rpx;
margin-top:25rpx;
border-radius:20rpx;
}
.result{
margin-top:20rpx;
}
.resultTitle{
margin-left:75rpx;
}
.productTableTr{
height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #F8F8F8;display:flex;
}
.leftTr{
width: 283rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
width: 419rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
width: 702rpx;margin-left: 24rpx;border:1rpx solid #F8F8F8;border-radius: 6rpx;
}
.saveBtn{
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 284rpx;
background:#4FAFF2;
margin-top:20rpx;
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
identify(){
let that = this;
wx.request({
url: https://aip.baidubce.com/rest/2.0/image-classify/v1/body_seg?access_token= + that.data.AccessToken,
method: POST,
header: {
content-type: application/x-www-form-urlencoded
},
data:{
image:that.data.baseData
},
success: function (identify) {
that.setData({
imgBase64: identify.data.foreground
})
}
})
},
saveBtn(){
//获取文件管理器对象
const fs = wx.getFileSystemManager()
//文件保存路径
const Imgpath = wx.env.USER_DATA_PATH + /qrcodeImg + .png
//base64图片文件
let imageSrc = this.data.imgBase64.replace(/^data:image\/\w+;base64,/, )
//写入本地文件
fs.writeFile({
filePath: Imgpath,
data: imageSrc,
encoding: base64,
success(res) {
//保存到手机相册
wx.saveImageToPhotosAlbum({
filePath: Imgpath,
success(res) {
wx.showToast({
title: 保存成功,
icon: success
})
},
fail: function(err) {
}
})
}
})
},

到此这篇关于基于小程序实现透明背景人像

您可能感兴趣的文章:微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)微信小程序基于slider组件动态修改标签透明度的方法示例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 方法 代码
上一篇:app开发和app运营
下一篇:app开发中存在的商业模式
相关文章

 发表评论

暂时没有评论，来抢沙发吧~