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

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

一、文章前言

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

二、具体流程及准备

2.1、注册百度开放平台及微信公众平台账号。
2.2、下载及安装微信Web开发者工具。
2.3、如需通过SDK调用及需准备对应语言的开发工具。

三、开发步骤

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

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

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

/**
   * 生命周期函数--监听页面加载
   */
  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的功能效果。

<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>
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、给图像转换按钮对应的响应事件中绑定开放平台接口,将参数进行拼接传递。

    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等操作。

//获取文件管理器对象
    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) {
          }
        })
      }
    })

四、完整代码

<!--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>
<!--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;
}
  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) {
          }
        })
      }
    })

  },

到此这篇关于基于小程序实现透明背景人像分割的文章就介绍到这了,更多相关小程序透明背景人像分割内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML <!--pages/scroll/scroll.wxml--> <view style="height:100%;position:fixed;width:100%;"> <scroll-v

  • 微信小程序基于slider组件动态修改标签透明度的方法示例

    本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

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

    目录 一.文章前言 二.具体流程及准备 三.开发步骤 四.完整代码 一.文章前言 此文主要实现识别人体的轮廓范围,与背景进行分离并保存效果图,适用于拍照背景替换及透明背景的人像图(png格式)转换. 二.具体流程及准备 2.1.注册百度开放平台及微信公众平台账号.2.2.下载及安装微信Web开发者工具.2.3.如需通过SDK调用及需准备对应语言的开发工具. 三.开发步骤 2.1.打开微信开发者工具,新建项目,选择不使用模板.不使用云服务. 2.2.在pages文件夹下面创建一个文件夹并新建对应的

  • 如何基于uni-app实现微信小程序一键登录与退出登录功能

    目录 起因 总体思路 详细流程 总结 起因 目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程.微信小程序官方文档.网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习. 总体思路 创建Vuex进行状态管理(可根据实际需求自行选择是否使用) 创建一个登录按钮并添加触发事件 调用官方uni.getUserProfile() 接口获取用户信息 调用官方uni.login() 接口获取临时登录凭证code 调用后端的登录接口将code 传过去

  • 微信小程序实现的canvas合成图片功能示例

    本文实例讲述了微信小程序实现的canvas合成图片功能.分享给大家供大家参考,具体如下: 先要获取图片的信息  然后将需要合成的内容用canvas绘制出来,得到一个合成好的画布,接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.这个时候的路径 是微信的临时路径,浏览器是访问不了的,因此需要请求服务器  用 wx.uploadFile 将本地资源上传到开发者服务器. 在页面的wxml中加入canvas组件如下: <view c

  • 微信小程序项目实践之验证码倒计时功能

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

  • 微信小程序实现自定义加载图标功能

    效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转.): 3.通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位. 4.由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序实现简单input正则表达式验证功能示例

    本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

  • 微信小程序使用audio组件播放音乐功能示例【附源码下载】

    本文实例讲述了微信小程序使用audio组件播放音乐功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio> ② ind

随机推荐