AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-05-18 363
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 废话不多说，直接看吧！涉及技术：微信小程序云开发涉及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
小程序
关键词：
开源小程序
小程序照片
南方者
目录
相关文章
jsjsjjs
|
小程序 JavaScript 算法
开源轻量级 IM 框架 MobileIMSDK 的微信小程序端已发布！
MobileIMSDK - 微信小程序端是一套基于微信原生 WebSocket 的即时通讯库：
jsjsjjs
285 0
yuanzhengme
|
6月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
yuanzhengme
298 65
她说她一如既往的爱我
|
8月前
|
小程序
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
她说她一如既往的爱我
357 0
她说她一如既往的爱我
|
8月前
|
小程序
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
她说她一如既往的爱我
238 0
她说她一如既往的爱我
|
8月前
|
小程序
微信小程序上传图片的三种方法
微信小程序上传图片的三种方法
她说她一如既往的爱我
341 0
风水道人
|
9月前
|
小程序 前端开发 JavaScript
开源的SpringBoot项目（含小程序）
开源的SpringBoot项目（含小程序）
风水道人
129 0
RedEric
|
小程序 网络协议 物联网
小程序AP配网和AK配网教程（开源）
小程序AP配网和AK配网教程（开源）
RedEric
522 0
技术小余哥
|
9月前
|
小程序 前端开发 语音技术
开源！！！垃圾分类识别小程序--------附源码！！！
开源！！！垃圾分类识别小程序--------附源码！！！
技术小余哥
131 0
camellia。
|
缓存 资源调度 小程序
微信小程序（二十五）微信小程序富文本编辑器editor上传图片
一般在做网站开发的时候，最开始使用的一般都是百度的ueditor，但是这个玩意好久不更新了，功能到时够用，就是UI以及其他的一些套件的视觉效果稍差。
camellia。
345 0
Mr.Meng_95
|
小程序
小程序上传图片至云存储空间
小程序上传图片至云存储空间
Mr.Meng_95
147 0

热门文章

最新文章

  • 1
    微信小程序 app.json 配置文件解析与应用
  • 2
    微信小程序与Java后端实现微信授权登录功能
  • 3
    【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
  • 4
    跑腿小程序系统源码
  • 5
    圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里？
  • 6
    微信小程序默认的文字内容在左上角怎么办？带你0基础快速了解skyline渲染模式。
  • 7
    基于Uniapp+php校园小程序，校园圈子论坛系统功能，校园跑腿二手交流功能设计
  • 8
    uniapp跨平台框架，陪玩系统并发性能测试，小程序源码搭建开发解析
  • 9
    打造无缝社交体验：多平台适配，开启线上线下陪玩系统小程序社交新时代
  • 10
    TP6+Uni-app框架下，圈子系统小程序的快速上线开发步骤
  • 1
    【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
    89
  • 2
    10分钟搭建微信小程序ecs【2月更文挑战第07天】
    33
  • 3
    微信小程序与Java后端实现微信授权登录功能
    115
  • 4
    uniapp跨平台框架，陪玩系统并发性能测试，小程序源码搭建开发解析
    55
  • 5
    打造无缝社交体验：多平台适配，开启线上线下陪玩系统小程序社交新时代
    53
  • 6
    基于Uniapp+php校园小程序，校园圈子论坛系统功能，校园跑腿二手交流功能设计
    69
  • 7
    微信小程序 app.json 配置文件解析与应用
    132
  • 8
    thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
    26
  • 9
    原生微信小程序笔记完整总结
    42
  • 10
    微信小程序默认的文字内容在左上角怎么办？带你0基础快速了解skyline渲染模式。
    76

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型