【来源】https://juejin.cn/post/7028624704491487269

一前言
二展示情况
- 【上传检查】
- 【整体流程】
三链接要点（API接口的准备工作）
四核心代码
- 【识别猫照 · 云函数代码】
- 【变卡通 · 云函数代码】
- 【识别猫照 · js代码】
- 【变卡通 · js代码】
五完整代码
- 【`cat_change.wxml`代码】
- 【`cat_change.css`代码】
- 【`cat_change.js`代码】
- 【`cat_change.json`代码】
六完整项目源码地址

一前言

废话不多说，直接看吧！

涉及技术：微信小程序云开发

涉及API接口：百度云-图像增强、百度云-图像识别

二展示情况

【上传检查】

【整体流程】

三链接要点（API接口的准备工作）

涉及百度云的API接口，我们需要申请注册百度云。
调用API接口，需要用到百度云的access_token，access_token又需要请求一个接口方可能获取到。（并且access_token有效时间是一个月）

流程（获取access_token官方实例）：

注册后——》来到所需的产品服务页面——》创建应用——》管理应用

——》拿到请求access_token的参数client_id、client_secret

——》发送请求获取access_tokenhttps://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】（只需要修改百度云应用的AK和SK改成应用里的对应API Key和Secret Key）

——》然后就可以查看对应的接口文档进行使用啦~
这里展示的是：动物识别

四核心代码

微信小程序·云开发

【识别猫照 · 云函数代码】

checkAnimal文件夹下index.js 云函数代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
var rp = require('request-promise')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event, context) => {let datas = event.datasdatas.access_token = '你的百度云access_token' // 这里需要添加return new Promise((resolve, reject) => {rp({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal',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()}}})})
}

【变卡通 · 云函数代码】

catChange文件夹下index.js 云函数代码

// 云函数入口文件
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.datasdatas.access_token = '你的百度云access_token' // 这里需要添加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()}}})})
}

页面的js代码

【识别猫照 · js代码】

    // 检查图片是不是动物，再判断是否为猫咪// baseImg传的是base64格式，并且前面是没有'data:image/png;base64'wx.cloud.callFunction({name: 'checkAnimal',data: {datas: {image: baseImg,}}}).then(res => {console.log(res)var checkName = res.result.result[0].nameconsole.log(checkName.indexOf("猫"))if (!checkName || checkName.indexOf("猫") == -1) {wx.showToast({title: '请添加有猫咪的照片！',icon: 'none'})} else {that.setData({image,baseImg})}// that.setData({//   image: 'data:image/png;base64,' + res.result.image,//   baseImg: res.result.image,// }) }).catch(err => {}).finally(() => {})

【变卡通 · js代码】

    // baseImg传的是base64格式，并且前面是没有'data:image/png;base64'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(() => {})

五完整代码

【`cat_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><view class='head'><view>点击加号上传图片</view></view><view class='image-box'><view class='image' style="border: 20px solid white;"><image class='image' src='{{image}}'></image></view></view><view style='position:absolute;top: 59%;width:100%;text-align: center;'><textstyle="font-size: 24rpx;color: rgb(90, 90, 90);" space="emsp">滑动看看更多小猫咪↔</text></view><view id="kuang" class='image-kuang' bindtap='chooseImage'><image class='image' src='{{image1}}'></image></view><scroll-view scroll-x class='top' scroll-with-animation='true' bindscroll='scroll'><view id='-1' class='pic-box' bindtap='chooseKuang'><!-- 这里图片需要换 --><image class='pic'src='cloud://develop-3gb3s6m1d5806159.6465-develop-3gb3s6m1d5806159-1304559061/images/tool/cat_change/add.png'></image></view></scroll-view><view class="bottom"><button type='primary' bindtap='changePic' class=''>猫咪卡通变</button><button type='primary' bindtap='savePic' class=''>保存小猫</button></view>
</view>

【`cat_change.css`代码】

page {background: #e5e5e5;
}.image-canvas {position: absolute;/*启用绝对定位*/top: 100%;width: 1000px;height: 1000px;
}page,
.cropper-wrapper {width: 100%;height: 100%;
}.head {width: 750rpx;height: 250rpx;display: flex;justify-content: center;/*垂直居中*/align-items: center;/*水平居中*/font-size: 28rpx;color: rgb(90, 90, 90);flex-direction: column;/*纵向排布*/
}.top {height: 200rpx;white-space: nowrap;display: flex;position: absolute;/*启用绝对定位*/top: 65%;
}.pic-box {border: 5rpx solid white;width: 150rpx;height: 150rpx;display: inline-block;margin: 0.1rem;/* padding-left: 0.3125rem; */
}.pic-white {display: inline-block;width: 125rpx;
}.pic {height: 100%;width: 100%;
}.image-box {position: absolute;/*启用绝对定位*/top: 15%;width: 750rpx;height: 500rpx;display: flex;justify-content: center;/*垂直居中*/align-items: center;/*水平居中*/
}.image-kuang {position: absolute;/*启用绝对定位*/top: 15%;width: 750rpx;height: 500rpx;display: flex;z-index: 100;justify-content: center;/*垂直居中*/align-items: center;/*水平居中*/
}.image {width: 500rpx;height: 500rpx;
}.bottom {display: flex;position: fixed;top: 82%;width: 100%;color: rgb(90, 90, 90);font-size: 24rpx;justify-content: center;/*垂直居中*/align-items: center;/*水平居中*/
}

【`cat_change.js`代码】

Page({data: {image1: '',baseImg: '', // base64没有data:image/jpg;base64,image: 'cloud://develop-3gb3s6m1d5806159.6465-develop-3gb3s6m1d5806159-1304559061/images/tool/cat_change/add.png', // 这里图片需要换},chooseImage() {var that = this;wx.showActionSheet({itemList: ['从相册中选择', '拍照'],itemColor: "#FAD143",success: function (res) {if (!res.cancel) {wx.showLoading({title: '正在读取...',})// wx.showToast({//   title: '正在读取...',//   icon: 'loading'// })if (res.tapIndex == 0) {that.chooseWxImage1('album', 1)} else if (res.tapIndex == 1) {that.chooseWxImage1('camera', 1)}}}})},chooseWxImage1(type, imglng) {var that = this;console.log(imglng)wx.chooseImage({count: imglng, // 最大图片数量sizeType: ['original'], // ['original', 'compressed'], // compressed : 压缩图sourceType: [type],success: function (res) {// that.setData({//   image: res.tempFilePaths// })//以下为图片路径转base64位//图片base64位wx.getFileSystemManager().readFile({filePath: res.tempFilePaths[0], //选择图片返回的相对路径encoding: 'base64', //编码格式success: (res) => {wx.showLoading({title: '正在检查图片...',})let baseImg = res.datalet image = 'data:image/png;base64,' + res.data// console.log(baseImg)// 检查图片是不是动物，再判断是否为猫咪wx.cloud.callFunction({name: 'checkAnimal',data: {datas: {image: baseImg,}}}).then(res => {console.log(res)var checkName = res.result.result[0].nameconsole.log(checkName.indexOf("猫"))if (!checkName || checkName.indexOf("猫") == -1) {wx.showToast({title: '请添加有猫咪的照片！',icon: 'none'})} else {that.setData({image,baseImg})}// that.setData({//   image: 'data:image/png;base64,' + res.result.image,//   baseImg: res.result.image,// }) }).catch(err => {}).finally(() => {wx.hideLoading()})}})// } catch (err) {//   console.log(err)// }console.log(res.tempFilePaths[0])}})wx.hideLoading()},/*** 变卡通*/changePic: function (e) {let that = thisvar baseImg = that.data.baseImgif (baseImg.length < 8) {wx.showToast({title: '请先添加小猫照片噢~',icon: 'none'})return}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(e) {let that = thisvar baseImg = that.data.baseImgif (baseImg.length < 8) {wx.showToast({title: '请先生成卡通猫咪~',icon: 'none'})return}//保存图片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)}})},/*** 页面接受参数 */onLoad: function (options) {},
})

【`cat_change.json`代码】

{"navigationBarTitleText": "猫咪卡通变","navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh":false
}

六完整项目源码地址

gitee地址：https://gitee.com/nanfangzhe/wechat_demo

我是程序员南方者，谢谢你的观看~

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

uni-app——小程序实现本地图片的上传以及身份证的智能识别
文章目录前言一.示例图二.实现过程 1.完成提交图片的api地址 2.获取本地图片 3.将本地图片上传至开发者服务器三.具体实现代码四.身份证的智能识别总结前言上传本地图片的功能很常见 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
小程序上传视频的php接口处理,微信小程序[第十二篇] -- 上传视频
通过上一篇的学习,我们可以成功将宝宝的照片传到指定相册了,但是可爱的宝宝岂能只有照片,小视频必须同步跟上,莫问题!咱这篇就来一个视频上传的实现. 俺家小核桃镇贴. 服务端其实对于yii2程序而言,如 ...
微信小程序聊天室+websocket+文件上传（发送图片）
最近哥们在写微信小程序,其中有个需求是搭建一个聊天室,可多人聊天,可私聊,可发送图片.但是由于一直没有这方面相关的了解,于是慢慢的去看,去做,前期真的很困难,路子不好走,慢慢的再搭建. 先看看效果吧 ...
微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
解决微信小程序开发工具右上角没有上传按钮
原因: AppId没有填对登录网站微信公众平台选择注册的小程序邮箱登录,不是选择测试号,如果进入测试号 ,小程序界面没什么东西,如下界面是测试号节目: 不是上面测试号界面,得是下面这个小程序管理 ...
微信小程序图片(单图多图上传显示)
微信小程序上传图片组件自定义最近在做微信小程序开发的时候,遇到了一个问题,就是图片上传于显示问题,微信自带的感觉用起来还是不方便,于是就萌生了自定义图片上传于显示组件废话不多说直接上代码首先创建 ...

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

目录

一前言

二展示情况

【上传检查】

【整体流程】

三链接要点（API接口的准备工作）

四核心代码

【识别猫照 · 云函数代码】

【变卡通 · 云函数代码】

【识别猫照 · js代码】

【变卡通 · js代码】

五完整代码

【`cat_change.wxml`代码】

【`cat_change.css`代码】

【`cat_change.js`代码】

【`cat_change.json`代码】

六完整项目源码地址

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

最新文章

热门文章

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

目录

一 前言

二 展示情况

【上传检查】

【整体流程】

三 链接要点（API接口的准备工作）

四 核心代码

【识别猫照 · 云函数代码】

【变卡通 · 云函数代码】

【识别猫照 · js代码】

【变卡通 · js代码】

五 完整代码

【cat_change.wxml代码】

【cat_change.css代码】

【cat_change.js代码】

【cat_change.json代码】

六 完整项目源码地址

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

最新文章

热门文章

一前言

二展示情况

三链接要点（API接口的准备工作）

四核心代码

五完整代码

【`cat_change.wxml`代码】

【`cat_change.css`代码】

【`cat_change.js`代码】

【`cat_change.json`代码】

六完整项目源码地址