头像总撞脸，如何定制化头像——微信小程序云开发

2022-10-08 08:21:20

前言

之前写了篇文章《头像总撞脸，如何定制化头像？几行Python代码实现人像动漫化》，里面提到用自己的真人照片通过阿里云API实现人物动漫化，生成一个独一无二对自己价值珍贵的头像。不过操作起来有亿点点麻烦，所以希望做一个小程序，直接在手机端就能一键生成专属于自己的动漫头像，下面是展示效果！！！

一、核心功能设计

该小程序想要实现的是将微信头像或者选择相册中的照片动漫化，由于阿里云所以拆解需求后，整理的核心功能如下：

授权登录获取头像及昵称
选择相册中的图片
点击动漫化按钮，生成图像
保存图像

二、实现步骤

首先新建一个空白的云开发小程序项目，详细步骤可以参考之前《微信小程序云开发入门详细教程》的文章。

1.change云函数

首先在cloudfuncitons中新建change云函数：

const cloud = require('wx-server-sdk')
var rp = require('request-promise')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const DB = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  let datas = event.datas
  datas.access_token = '你的token' // 这里access_token需要你去百度云请求获取(官方地址：https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu)
  return new Promise((resolve, reject) => {
    rp({
      url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime',
      method: "POST",
      json: true,
      form: event.datas,
    }, function (error, response, body) {
      console.log("响应" + body)
      resolve(body)
      if (!error && response.statusCode == 200) {
        try {} catch (e) {
          reject()
        }
      }
    })
  })
}

2.登录界面

在pages/index/index.wxml设计页面：

<view wx:if="{{canIUse}}">
    <view class='header'>
        <view class="userinfo-avatar">
            <open-data type="userAvatarUrl"></open-data>
        </view>
    </view>
    <view class="content">
        <view>申请获取以下权限</view>
        <text>获得您的公开信息（昵称，头像等）</text>
    </view>
    <button wx:if="{{canIUse}}" class="loginBtn" type="primary"  lang="zh_CN" bindtap="bindGetUserProfile" >
        授权登录
    </button>
</view>

在pages/index/index.js添加用户信息验证：

    bindGetUserProfile(e)     //当用户点击授权登录按钮触发 bindGetUserInfo函数
    {
      var that=this
      wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
          // console.log(res.userInfo)
          var avantarurl=res.userInfo.avatarUrl; 
          wx.navigateTo({
            url: '../../pages/change/change?url='+ avantarurl ,
          })
          },
          fail:(res)=>{
            console.log(1)
          }
        })
        
    },

其中将头像的url传递给change界面。

效果如下：

3.change页面

在该页面进行选取照片以及头像动漫化。

在pages/change/change.wxml设计页面：

<view style='width:0;height:0;overflow:hidden;' wx:if="{{cut}}">
  <canvas class='image-canvas' canvas-id="shareImg" wx:if="{{cut}}"></canvas>
</view>


  <view class='image-box'>
    <view class='image' style="border: 20px solid white;">
      <image class='image' src='{{image}}'></image>
    </view>
  </view>

  <view id="kuang" class='image-kuang'>
    <image class='image' src='{{image1}}'></image>
  </view>

<view class="bottom">
  <button type='primary' bindtap='chooseImage' class="">选择图片</button>
  <button type='primary' bindtap='changePic' class=''>动漫化</button>
  <button type='primary' bindtap='savePic' class=''>保存图片</button>
</view>

在pages/change/change.js定义函数：

其中onload函数接收index传递的url。

  onl oad: function (options) {
    if(options.url){
        // console.log(options.url)
        var path = this.headimgHD(options.url)
        console.log(path)
        this.setData({
            image:path,
            // image1:path,
            // baseURL:path
        })
    }

其中chooseImage函数实现选择图片。

  chooseImage() {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#FAD143",
      success: function (res) {
        if (!res.cancel) {
          wx.showLoading({
            title: '正在读取...',
          })
          if (res.tapIndex == 0) {
            that.chooseWxImage1('album', 1)
          } else if (res.tapIndex == 1) {
            that.chooseWxImage1('camera', 1)
          }
        }
      }
    })
  },

changePic函数调用change云函数实现头像动漫化。

  changePic: function (e) {
    let that = this
    var baseImg = that.data.baseImg
    wx.showLoading({
      title: '正在生成...',
    })
    wx.cloud.callFunction({
      name: 'catChange',
      data: {
        datas: {
          image: that.data.baseImg,
        }
      }
    }).then(res => {
      console.log(res)
      that.setData({
        image: 'data:image/png;base64,' + res.result.image,
        baseImg: res.result.image,
      })
    }).catch(err => {

    }).finally(() => {
      wx.hideLoading()
    })
  },

savePic函数保存照片。

  savePic(e) {
    let that = this
    var baseImg = that.data.baseImg
    //保存图片
    var save = wx.getFileSystemManager();
    var number = Math.random();
    save.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
      data: baseImg,
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
          success: function (res) {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function (err) {
            console.log(err)
          }
        })
        console.log(res)
      },
      fail: err => {
        console.log(err)
      }
    })
  },

总结

其实这个小程序实现起来并不是很难，只是需要开通百度api以及会云函数，再了解一些小程序基本的api，就能够开发出来，大家有时间的可以去试试，后台我已经搭好了，大家可以直接使用，可以看看效果。

参考：

【开源】【猫咪卡通变 - 小程序】拍摄猫咪或上传猫咪照片，使其转化为卡通猫咪.（且上传图片必须为猫咪）

码农公寓

前言

一、核心功能设计

二、实现步骤

1.change云函数

2.登录界面

3.change页面

总结

相关文章