欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于微信小程序?qū)崿F(xiàn)透明背景人像分割功能

 更新時間：2022年10月08日 10:41:04   作者：摔跤貓子  
這篇文章主要介紹了基于小程序?qū)崿F(xiàn)透明背景人像分割,此文主要實現(xiàn)識別人體的輪廓范圍，與背景進(jìn)行分離并保存效果圖，適用于拍照背景替換及透明背景的人像圖（png格式）轉(zhuǎn)換，需要的朋友可以參考下

一、文章前言

此文主要實現(xiàn)識別人體的輪廓范圍，與背景進(jìn)行分離并保存效果圖，適用于拍照背景替換及透明背景的人像圖（png格式）轉(zhuǎn)換。

二、具體流程及準(zhǔn)備

2.1、注冊百度開放平臺及微信公眾平臺賬號。
2.2、下載及安裝微信Web開發(fā)者工具。
2.3、如需通過SDK調(diào)用及需準(zhǔn)備對應(yīng)語言的開發(fā)工具。

三、開發(fā)步驟

2.1、打開微信開發(fā)者工具，新建項目，選擇不使用模板、不使用云服務(wù)。

在這里插入圖片描述

2.2、在pages文件夾下面創(chuàng)建一個文件夾并新建對應(yīng)的page文件。

在這里插入圖片描述

2.3、在js的onLoad事件中請求獲取Token的接口，將接口返回access_token存儲到該頁的變量當(dāng)中，用于后續(xù)請求圖像分割的接口憑證。ApiKey和SecretKey建議密文保存。

/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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中實現(xiàn)對應(yīng)的選擇圖片及轉(zhuǎn)換base64的功能效果。

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">上傳圖片</view>
  <view class="rightBtn" bindtap="identify">圖像轉(zhuǎn)換</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、給圖像轉(zhuǎn)換按鈕對應(yīng)的響應(yīng)事件中綁定開放平臺接口，將參數(shù)進(jìn)行拼接傳遞。

在這里插入圖片描述

    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、根據(jù)接口返回的數(shù)據(jù)來看，我們先取foreground也就是分割后的人像前景摳圖進(jìn)行展示。

在這里插入圖片描述

2.7、能夠成功將解析后的圖片進(jìn)行展示后，我們將返回的base64格式的圖片進(jìn)行處理然后保存到本地，就可以得到一個透明背景的png，我們可以自己對這個圖片進(jìn)行上色、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) {
        //保存到手機(jī)相冊
        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">圖像轉(zhuǎn)換</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) {
        //保存到手機(jī)相冊
        wx.saveImageToPhotosAlbum({
          filePath: Imgpath,
          success(res) {
            wx.showToast({
              title: '保存成功',
              icon: 'success'
            })
          },
          fail: function(err) {
          }
        })
      }
    })

  },

到此這篇關(guān)于基于小程序?qū)崿F(xiàn)透明背景人像分割的文章就介紹到這了,更多相關(guān)小程序透明背景人像分割內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 簡單談?wù)凧avaScript的同步與異步

    簡單談?wù)凧avaScript的同步與異步

    這篇文章主要介紹了簡單談?wù)凧avaScript的同步與異步的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • Electron?自定義窗口桌面時鐘實現(xiàn)示例詳解

    Electron?自定義窗口桌面時鐘實現(xiàn)示例詳解

    這篇文章主要為大家介紹了Electron?自定義窗口桌面時鐘實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • JS實現(xiàn)百度新聞導(dǎo)航欄效果

    JS實現(xiàn)百度新聞導(dǎo)航欄效果

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)百度新聞導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • JS獲取Promise對象里面的值問題

    JS獲取Promise對象里面的值問題

    這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • JavaScript判斷瀏覽器及其版本信息

    JavaScript判斷瀏覽器及其版本信息

    本篇文章主要分享了通過window.navigator來判斷瀏覽器及其版本信息的實例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript Array對象詳解

    JavaScript Array對象詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類，知識點很全面，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下
    2016-03-03
  • 如何用JavaScript讓你的瀏覽器說話

    如何用JavaScript讓你的瀏覽器說話

    這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說話，對語音感興趣的同學(xué)，可以實驗一下
    2021-04-04
  • JavaScript 異步調(diào)用

    JavaScript 異步調(diào)用

    本文通過一個小小題目逐步走進(jìn)javascript 異步調(diào)用問題，本文附有解答過程，感興趣的朋友一起看看吧
    2017-10-10
  • HTML長文本截取含有HTML代碼同樣適用的兩種方法

    HTML長文本截取含有HTML代碼同樣適用的兩種方法

    正如標(biāo)題所言我們可以使用CSS截斷字符串：IE,FireFox，Opera ，Safari都兼容也可以使用js截取，具體實現(xiàn)如下，希望對大家有所幫助
    2013-07-07

最新評論