家里6只猫，我是如何分辨？前端程序员的AI小程序！

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

前言

当我看到这个正文活动的时候，我就知道这就是我该参加的活动。不说别的吗，家里六只猫。我这可不是什么猫舍。我就是单纯的喜欢养，家里人也喜欢养猫。话不多说，开始进入正题！作为一个资深的养猫认识，家里第一只猫是一只英短，第二只是美短，不得不多，猫的种类还是挺多的。后面随着见的猫越来越多，才知道猫的品种是真的多，CFA（Cat Fanciers’Association）承认的纯种猫总共有42个品种。TICA（The International Cat Association）目前认可的品种总共有71个。我一个养猫的都记不住，更何况哪些不养猫的。有些想养猫的，却不知道看上的是哪种品种的猫，只能任由卖主说，自己啥都不知道。针对这些场景，我觉得做一个AI识宠物，是必须且紧急的。造福猫主子！

为了方便，我最终决定做一个微信小程序。

创建项目

微信小程序创建项目是真的挺简单的，我这里就不介绍了。

这里为了演示，我使用了测试号，默认使用官方的模板！！！

修改默认值

去掉app.wxss的所有样式。

app.json更改配置，包括标题，背景颜色

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFCFBF",
    "navigationBarTitleText": "AI识猫",
    "navigationBarTextStyle":"black"
  },

2 创建页面

页面主要包括一个渐变的提示文字，以及一个小猫的按钮。通过这个按钮可以调用手机的摄像头。

这里中做了一个回显，当没有上传或者拍照的时候吗，显示小猫。如果有的画，显示图片。

<!--index.wxml-->
<view class="container">
  <view class="header">
  <P data-text='拍个照，知品种'>
    拍个照，知品种
  </P>
  </view>
  <view class="the-container">
    <view class="cat-window">
      <image wx:if="{{catImage}}" class='upload_img ' 
                src="{{catImage}}" bindtap="chooseImage"></image>
      <view wx:else="{{!catImage}}" class="cat body bodySlant earsBasic" bindtap="chooseImage">
        <view class="face"></view>
        <view class="features"></view>
      </view>
    </view>
  </view>
</view>

这里绑定了一个chooseImage方法.这个方法主要是调用小程序提供的方法。设置只能上传一个图像。同时还将图片变成base64格式的。

 chooseImage() {
    let that = this
    wx.chooseImage({
      count: 1, 
      sizeType: ["original", "compressed"], 
      sourceType: ["album", "camera"], 
      success: function (res) {
        that.setData({
          catImage: res.tempFilePaths
        })
        const params={
          image:''
        }
        const fileManager = wx.getFileSystemManager()
        fileManager.readFile({
          filePath	:res.tempFilePaths[0],
          encoding:'base64',
          success:(res)=>{
            params.image=res.data
            that.getCatInfo(params)
          }
        })       
      }

    })
  },

最后调用我们的AI识别接口，给我们的识别结果！这里的AI识别接口，我用的是腾讯云的。cloud.tencent.com/product/tii…

后记

完整的代码，可以找我获取！！！