ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-11-16 14:34:47  阅读:171  来源: 互联网

标签:console log res 总撞 头像 微信 change wx


前言

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

一、核心功能设计

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

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

二、实现步骤

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

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,就能够开发出来,大家有时间的可以去试试,后台我已经搭好了,大家可以直接使用,可以看看效果。

参考:

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

标签:console,log,res,总撞,头像,微信,change,wx
来源: https://blog.csdn.net/kobepaul123/article/details/121305443

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有