备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2022-05-18 205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 废话不多说，直接看吧！涉及技术：微信小程序云开发涉及API接口：百度云-图像增强、百度云-图像识别

微信截图_20220517224020.png


一起用代码吸猫！本文正在参与【喵星人征文活动】


一 前言

废话不多说，直接看吧！

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

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


二 展示情况

【上传检查】


链接


【整体流程】


链接

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

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


获取access_token流程


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

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


微信截图_20220517224245.png


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


微信截图_20220517224317.png


——》发送请求获取access_tokenaip.baidubce.com/oauth/2.0/t…


微信截图_20220517224406.png


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


微信截图_20220517224442.png


四 核心代码

微信小程序·云开发


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


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.datas
  datas.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.datas
  datas.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].name
      console.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;'><text
      style="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.data
            let 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].name
              console.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 = this
    var baseImg = that.data.baseImg
    if (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 = this
    var baseImg = that.data.baseImg
    if (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.com/nanfangzhe/…

个人Gitee地址：gitee.com/nanfangzhe/

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

文章标签：
JavaScript
程序员
API
小程序
关键词：
开源小程序
小程序照片
南方者
目录
相关文章
不苒
|
存储 移动开发 小程序
【uniapp小程序】上传图片
【uniapp小程序】上传图片
不苒
1033 0
【uniapp小程序】上传图片
技术小余哥
|
1月前
|
小程序 前端开发 语音技术
开源！！！垃圾分类识别小程序--------附源码！！！
开源！！！垃圾分类识别小程序--------附源码！！！
技术小余哥
44 0
Mr.Meng_95
|
6月前
|
小程序
小程序上传图片至云存储空间
小程序上传图片至云存储空间
Mr.Meng_95
70 0
天落色
|
9月前
|
小程序 数据库
一款开源的答题考试小程序，功能丰富，页面美观！
一款开源的答题考试小程序，功能丰富，页面美观！
天落色
250 0
jsjsjjs
|
小程序 JavaScript 算法
开源即时通讯IM框架MobileIMSDK的微信小程序端技术概览
MobileIMSDK - 微信小程序端是一套基于微信原生 WebSocket 的即时通讯库：
jsjsjjs
150 0
jsjsjjs
|
存储 移动开发 小程序
开源即时通讯IM框架MobileIMSDK的微信小程序端开发快速入门
开源即时通讯IM框架MobileIMSDK的微信小程序端开发快速入门
jsjsjjs
267 1
开源即时通讯IM框架MobileIMSDK的微信小程序端开发快速入门
编程乐趣
|
小程序 关系型数据库 MySQL
推荐一款基于 .NET Core开源的小程序商城系统
这个是一个基于 .NET Core构建的简单、跨平台、模块化的小程序商城系统。
编程乐趣
663 0
推荐一款基于 .NET Core开源的小程序商城系统
编程乐趣
|
存储 开发框架 供应链
开源小程序商城推荐-支持所有小程序平台
商城系统是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统；前后端分离，支持分布式部署，跨平台运行；拥有分销、代理、团购秒杀、接龙、拼团、直播、优惠券、自定义表单等众多营销功能，拥有完整SKU、下单、售后、物流流程，支持可视化自定义首页模块布局效果。
编程乐趣
310 0
开源小程序商城推荐-支持所有小程序平台
opensca社区
|
开发框架 JSON 小程序
开源分享|如何解锁小程序开发？这份攻略请收好！
本期我们整理了一些用于小程序开发的开源项目，快来围观~
opensca社区
216 0
游客xddhikypg4wzc
|
监控 小程序 安全
基于云开发的答题活动小程序v1.0，开开开源啦
基于云开发的答题活动小程序v1.0，开开开源啦
游客xddhikypg4wzc
170 1
基于云开发的答题活动小程序v1.0，开开开源啦

热门文章

最新文章

  • 1
    微信小程序全栈开发之性能优化策略
  • 2
    小程序全栈开发中的跨域问题及其解决方案
  • 3
    小程序全栈开发中的多端适配与响应式布局
  • 4
    微信小程序全栈开发中的身份认证与授权机制
  • 5
    微信小程序全栈开发中的PWA技术应用
  • 6
    探索微信小程序全栈开发的安全性问题
  • 7
    深入解析微信小程序全栈开发流程
  • 8
    基于SpringBoot+Vue+uniapp微信小程序的医院核酸检测服务系统的详细设计和实现
  • 9
    小程序全栈开发：前端与后端的完美结合
  • 10
    基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
  • 1
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
    31
  • 2
    基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
    28
  • 3
    基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
    21
  • 4
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
    29
  • 5
    基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
    30
  • 6
    基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
    31
  • 7
    基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
    26
  • 8
    基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
    25
  • 9
    基于SpringBoot+Vue+uniapp微信小程序的医院核酸检测服务系统的详细设计和实现
    31
  • 10
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
    25

    • 相关课程

    更多
  • IoT小程序框架课程
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 1分钟SAE部署PHP商城小程序
  • 【图生图】一键部署3D卡通风格模型
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）