猜猫猫——白嫖喵咪识别小程序一起用代码吸猫！本文正在参与【喵星人征文活动】。背景前几天村长给我发了这次的征文活动。我

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

背景

前几天村长给我发了这次的征文活动。我虽然初入掘金，而且以前没整过，但我也想搏一搏呀！

但我一看主题就懵了，猫，活动介绍我来来回回看了两遍，这无从下手呀！我只有女朋友，哪有猫耶！

咋整，干不了！我连猫的种类都分不清楚，分不清楚！！这灵感不是来了嘛！我就整一个喵星人识别软件，管你黑猫白猫，我咔嚓一顿扫，齐活，美滋滋。

效果展示

效果展示.gif

小程序二维码，欢迎使用

小程序码.jpg

技术调研

图像识别

首先我得找一个图像识别的产品呀！不多说，百度走一波。然后就百度到了百度智能云。

咱反正都没用过，那就点进去看看吧，别说还真让我找到了。你猫也得算是个动物吧！图像识别技术

图像识别.png

具体的细节咱就不看了。反正都是接口传入图片参数。这个时候你以为技术调研就结束了嘛，错了呀，这年头没资源你能干锤子！

产品价格.png

所以我赶快去瞅瞅价格，我一点开，当时就舒服了，我看到了有免费测试资源，而且个人认证之后还能领取更多。虽然有几年的限制，对于我来说，这就够了呀。所以我一气呵成

注册
登录
个人认证
领取资源
创建应用

10分钟之内搞定，还真快。想实操的参考这个即可快速开始

现在图像识别的相关的资源已经处理完毕。之后我们就有了这样一个的应用，上面的一些信息等会调用接口的时候需要。

创建应用.png

拍照

拍照功能就做在小程序中，很流行也很方便，而且后面的服务端也可以上云。

服务端

刚才的图片识别大概看了一眼，需要请求接口，咱一个小前端，哪有后端，还好咱有后手。

uniCloud 完美解决后端问题，uniapp 快速开发微信小程序

小程序开发

先申请一个小程序吧，也是很方便的。小程序快速开始

按照此步骤创建一个创建uniCloud项目 uni-app 快速开始

项目当中使用的技术文档

图片识别相关云函数

创建 getAccessToken 云函数获取 token

"use strict";
exports.main = async (event, context) => {
  let api = "https://aip.baidubce.com/oauth/2.0/token";
  let url = `${api}?grant_type=client_credentials&client_id=[自己创建的应用的API Key]&client_secret=[Secret Key]`;
  const res = await uniCloud.httpclient.request(url, {
    method: "POST",
    contentType: "json", // 指定以application/json发送data内的数据
    dataType: "json", // 指定返回值为json格式，自动进行parse
  });
  let { data } = res;
  return data.access_token;
};

创建 imageClassify 云函数获取图片识别结果

"use strict";
exports.main = async (event, context) => {
  console.log("event : ", event);
  let { url } = event;
  // 获取 tocken
  let resToken = await uniCloud.callFunction({
    name: "getAccessToken",
  });
  if (resToken.errCode) {
    // 暴露错误信息
    return;
  }
  let access_token = resToken.result;
  console.log("获取的token", access_token);
  const res = await uniCloud.httpclient.request(
    `https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=${access_token}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      data: {
        url,
      },
      dataType: "json", // 指定返回值为json格式，自动进行parse
    }
  );
  let { status, data } = res;
  if (status !== 200) {
    // 暴露错误信息
    return;
  }
  return data;
};

小程序前端页面

注册相关页面

{
	"path": "pages/index/index", // 实现拍照功能
	"style": {
		"navigationBarTitleText": "猜猫猫"
	}
},
{
	"path": "pages/detail/detail", // 查询图片结果
	"style": {
		"navigationBarTitleText": "识别结果"
	}
}

index

export default {
  methods: {
    async onScan() {
      uni.chooseImage({
        count: 1, // 默认 9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: async function (res) {
          // 拍照并保存到本地
          let tempFilePath = res.tempFilePaths[0];

          // 进行上传操作
          const result = await uniCloud.uploadFile({
            filePath: tempFilePath,
            cloudPath: `${new Date().getTime()}.jpg`,
          });
          if (!result.success) {
            uni.showToast("图片上传失败了呀！");
            return;
          }
          console.log(result, "result");

          uni.navigateTo({
            url: `/pages/detail/detail?info=${encodeURIComponent(
              JSON.stringify({
                tempFilePath: result.fileID,
              })
            )}`,
          });
        },
        fail: function (res) {
          uni.showToast(res);
        },
      });
    },
  },
};

Note： 使用临时的图片或者先保存到本地的图片，上传到百度图像识别均不能识别。所以需要上传到云。

detail

export default {
  data() {
    return {
      classifyUrl: "",
      result: [],
    };
  },
  onLoad(option) {
    this.getQueryData(option);
  },
  methods: {
    getQueryData(option) {
      let params = JSON.parse(decodeURIComponent(option.info));
      if (!params) {
        return;
      }
      this.classifyUrl = params.tempFilePath;
      this.getResult();
    },
    getResult() {
      uni.showLoading({
        title: "识别中",
        mask: true,
      });
      uniCloud
        .callFunction({
          name: "imageClassify",
          data: {
            url: this.classifyUrl,
          },
        })
        .then((res) => {
          uni.hideLoading();
          let resData = res.result || {};
          this.result = resData.result;
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    onPreview() {
      // 预览图片
      uni.previewImage({
        urls: [this.classifyUrl],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片"],
        },
      });
    },
  },
};

小程序服务器域名设置

目前小程序已开发完毕，小程序需要再设置一下服务器域名

request合法域名
- api.bspapp.com;https://tcb-api.te…;
uploadFile合法域名
- api.bspapp.com;https://bsppub.oss…;

结尾

将小程序提交审核，等待通过，大功告成。

别看咱们东拼西凑的，付出的也仅仅是咱自己。但君子性非异也，善假于物也。

猜猫猫——白嫖喵咪识别小程序

背景