微信小程序变脸

第一次做小程序，费了不少力气调试，喜欢的话点个赞吧，谢谢！有问题多指教

是一个基于百度AI变脸的小程序，基本功能如下图

申请百度AI免费测试资源 

百度智能云-登录

登陆百度智能云后领取“图像增强与特效”和“人脸识别”的服务

 

 

 领取成功后在“应用列表”中创建应用

 应用创建成功后可复制API key和Secret key进行开发了

代码开发

app.json中指定页面index

 index.wxml中布局

<!--index.wxml-->
<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">上传照片</view>
  <view class="rightBtn" bindtap="transferImage">图像转换</view>
</view>
<radio-group bindchange="radioChanged" view class="radioBox">
    <radio class="radio" value="TO_KID" checked="true">年轻</radio>
    <radio class="radio" value="TO_OLD">老迈</radio>
    <radio class="radio" value="TO_FEMALE">女生</radio>
    <radio class="radio" value="TO_MALE">男生</radio>
    <radio class="radio" value="TO_ANIME">动漫</radio>
</radio-group>
    <image src="{{imgSrc}}" class="showImg" mode="heightFix"></image>
    <image src="{{imgDst}}" class="showImg" mode="heightFix"></image>

 index.wxss中美化

page{
    width:100%;
    height:100%;
}
  .containerBox{
    width:95%;
    height:5%;
    display:flex;    
    margin-top:3%;
  }
  .leftBtn{
    width:35%;
    height:100%;
    color:#4FAFF2;
    border:1rpx solid #4FAFF2;
    border-radius:10rpx;
    text-align: center;
    line-height:62rpx;
    font-size:32rpx;
    margin-left: 10%;
  }
  .rightBtn{
    width:35%;
    height:100%;
    color:4FAFF2;
    border:1rpx solid #4FAFF2;
    border-radius:10rpx;
    text-align: center;
    line-height:62rpx;
    font-size:32rpx;
    margin-left: 10%;
    background:#4FAFF2;
  }
  .showImg{
    height:40%;
    margin-left:5%;
    margin-top:2%;
    border-radius:10rpx;
  }
  .radioBox{
    width:100%;
    height:5%;
    margin-left:1%;
    margin-top:5%;
    color:#4FAFF2;
    font-size:32rpx;
  }
  .radio{
    width:19%;
    height:100%;
    margin-left:0.5%;
  }

index.js中写逻辑

Page( {
	data:{
        accessToken: '',
        animeToken: '',
        imgSrc: '',
        imgDst: '',
        imgType:'TO_KID',
        baseData: '',
	},

    /** 
     * 页面初始化
     * options 为页面跳转所带来的参数
     */
    onLoad: function( options ) {
     
    let that = this;
    let ApiKey='BAIDU AI 申请的KEY';
    let SecretKey='BAIDU AI 申请的KEY';
    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          
        });
      }
    });

    let animeApiKey='BAIDU AI 申请的KEY';
    let animeSecretKey='BAIDU AI 申请的KEY';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + animeApiKey+'&client_secret='+animeSecretKey,
      method: 'POST',
      success: function (res) {
        that.setData({
            animeToken:res.data.access_token          
        });
      }
    });
    
    },

    loadImage: function() {
        let that = this;
        wx.chooseImage({
          count: 0,
          sizeType: ['original', 'compressed'], //原图 / 压缩
          sourceType: ['album', 'camera'], //相册 / 相机拍照模式
          success(res) {
            if (res.tempFiles[0].size > 4096 * 1024) {
                wx.showToast({      
                  title: '图片文件过大',      
                  icon: 'none',      
                  mask: true,      
                  duration: 1500      
                })      
            } 
            else {
            that.setData({
              imgSrc: res.tempFilePaths[0]
            })
            //将图片转换为Base64格式
            wx.getFileSystemManager().readFile({
                filePath: res.tempFilePaths[0],
                encoding: 'base64',
                success(data) {
                    that.setData({
                        baseData: data.data
                    });
                }
            });
        }
        }
        })
      },



      radioChanged: function (event) {
        let imgType = event.detail.value;
        this.setData({
            imgType : imgType
        });
      },

      transferImage: function() {
            let that = this;

          if(that.data.imgType == 'TO_ANIME')
          {
              that.transferAnime();
              return;
          }

        wx.showLoading({
            title: "转换中...",  
            mask: true  
          })

        
        let requestData = {
          'image': that.data.baseData,
          'image_type': 'BASE64',
          //'quality_control': 'NORMAL',
          'action_type': that.data.imgType,
        };
        wx.request({
          url: 'https://aip.baidubce.com/rest/2.0/face/v1/editattr?access_token=' + that.data.accessToken,
          method: 'POST',
          header: {
            'content-type': 'application/json;'
          },
          data: requestData,
          success: function (result) {  
            if((typeof(result.data.result) !== 'undefined') && (typeof(result.data.result.image) !== 'undefined') && (result.data.result.image != ''))     
            {
                var image = result.data.result.image;
                wx.hideLoading();
                that.setData({
                    imgDst: 'data:image/jpg;base64,' + image
                });
            }
            else 
            {
                wx.hideLoading();
                if(typeof(result.data.error_msg) !== 'undefined')
                    {var retError =  '转换失败!' + result.data.error_msg}
                else 
                    {var retError = '转换失败! No data return'}
                wx.showModal({
                  showCancel: false,
                  title: '温馨提示',
                  content: retError,
                })
              }
          }
        })
      },

      transferAnime: function() {
      wx.showLoading({
          title: "转换中...",  
          mask: true  
        })

      let that = this;
      let requestData = {
        'image': that.data.baseData,
      };
      wx.request({
        url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime?access_token=' + that.data.animeToken,
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded;'
        },
        data: requestData,
        success: function (result) {   
          if((typeof(result.data.image) !== 'undefined') && (result.data.image != ''))     
          {
              var image = result.data.image;
              wx.hideLoading();
              that.setData({
                  imgDst: 'data:image/jpg;base64,' + image
              });
          }
          else 
          {
              wx.hideLoading();
              if(typeof(result.data.error_msg) !== 'undefined')
                  {var retError =  '转换失败!' + result.data.error_msg}
              else 
                  {var retError = '转换失败! No data return'}
              wx.showModal({
                showCancel: false,
                title: '温馨提示',
                content: retError,
              })
            }
        }
      })
    }
    
   
})