之前写了篇文章《头像总撞脸,如何定制化头像?几行Python代码实现人像动漫化》,里面提到用自己的真人照片通过阿里云API实现人物动漫化,生成一个独一无二对自己价值珍贵的头像。不过操作起来有亿点点麻烦,所以希望做一个小程序,直接在手机端就能一键生成专属于自己的动漫头像,下面是展示效果!!!
该小程序想要实现的是将微信头像或者选择相册中的照片动漫化,由于阿里云所以拆解需求后,整理的核心功能如下:
首先新建一个空白的云开发小程序项目,详细步骤可以参考之前《微信小程序云开发入门详细教程》的文章。
首先在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() } } }) }) }
在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界面。
效果如下:
在该页面进行选取照片以及头像动漫化。
在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,就能够开发出来,大家有时间的可以去试试,后台我已经搭好了,大家可以直接使用,可以看看效果。
参考:
【开源】【猫咪卡通变 - 小程序】拍摄猫咪或上传猫咪照片,使其转化为卡通猫咪.(且上传图片必须为猫咪)