我的微信小程序 期末大作业——基于百度大脑API的图片识别小程序

具体实现了动物识别、植物识别、车辆识别 三个功能

实验源码已经放到了我的GitHub，欢迎测试修改 (项目地址：https://github.com/ZHJ0125/ImageMaster)

下面给大家分享该项目的实验报告

目录1 概述1.1 课程大作业目的与要求

1.2 课程大作业简介

2 设计思路2.1 图片识别API

2.2 微信小程序UI框架

3 设计方案

4 设计过程4.1 百度开放平台注册

4.2 获取asscee_token

4.3 图片上传

4.4 图片格式转化

4.5 API请求

4.6 实现植物识别

4.7 实现车辆识别

4.8 Taro样式测试

4.9 WeUI样式测试

5 关键问题

6 使用说明

1 概述

1.1 课程大作业目的与要求

课程大作业的目的是：运用在本次课程中学到的知识来指导实践，了解程序设计其实现方法，学会解决实际问题。掌握微信小程序设计的具体步骤与基本方法，针对选定的程序做调研分析。通过课程大作业，提高实践动手技能，培养独立分析分析问题和解决问题的能力。

课程大作业的要求：本次课程大作业的选题比较灵活，可以是自主选题，也可以参考课本中的案例自行修改完善，题目要符合课程大作业的要求，并且具备一定的水平和深度。

1.2 课程大作业简介

图像识别是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对像的技术。在众多的图像识别分支中，拍照识别是一个重要的应用。利用图像识别技术，识别拍摄到的图片内容，已经广泛应用于各类图像识别App中。

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的“触手可及”和“即用即走”，用户扫一扫或搜一下即可打开应用。利用微信小程序使用便捷的特点，结合图片识别应用，本次大作业选定了制作微信小程序的图片识别应用——ImageMaster。本应用实现了基于微信小程序的动植物识别和车辆识别，使用便捷，充分发挥了微信小程序“即用即走”的特点。

同时，本次大作业项目制作过程只用了Git进行进度跟踪，便于进行版本回退和功能更新。

2 设计思路

根据初步选定的设计题目，查找相关资料，针对系统所涉及内容，查阅相关背景知识，将设计思路在此做一个概括。

本课题需要实现一个基本的图片识别应用，实现动物识别、植物识别和车辆识别三种主要功能。查阅的资料主要包括两方面：图片识别API的选择以及微信小程序UI框架的选择。

2.1 图片识别API

首先需要查阅图片识别API的相关资料，以便确定课题最终使用哪个API。下面我将在接口能力、是否有参考例程、个人评价三方面简要分析一下常见的几种图片识别API。百度大脑接口能力

表2-1 百度图片识别API接口能力接口名称接口能力简要描述图像主体检测识别图像中的主体具体坐标位置。

通用物体和场景识别高级版识别图片中的场景及物体标签，支持10w+标签类型。

菜品识别检测用户上传的菜品图片，返回具体的菜名、卡路里、置信度信息。

自定义菜品识别入库自定义的单菜品图，实现上传多菜品图的精准识别，返回具体的菜名、位置、置信度

logo商标识别识别图片中包含的商品LOGO信息，返回LOGO品牌名称、在图片中的位置、置信度。

动物识别检测用户上传的动物图片，返回动物名称、置信度信息。

植物识别检测用户上传的植物图片，返回植物名称、置信度信息。

果蔬食材识别检测用户上传的果蔬类图片，返回果蔬名称、置信度信息。

地标识别检测用户上传的地标图片，返回地标名称。

红酒识别识别图像中的红酒标签，返回红酒名称、国家、产区、酒庄、类型、糖分、葡萄品种等信息。

货币识别识别图像中的货币类型，返回货币名称、代码、面值、年份信息，可识别百余种国内外常见货币。调用方式

API 和 SDK 两种方式，SDK文档包含 Java、PHP、Python、C#、C++、Node语言，有丰富的 Demo。腾讯AI开放平台

接口包含OCR、人体与人脸识别、物体识别、图片特效、图片识别、敏感信息审核、闲聊机器人、基础文本分析、语义解析、语音识别 等等，有 PHP 参考例程。华为HiAI

接口包含人脸识别、人体识别、图片识别、图像分辨率、场景识别、文档检测矫正、人像分割、视频语音等等。有详细的开发指南，但是其针对的是 Android 手机平台的开发。旷世 Face++

接口包含人脸识别、人体识别、证件识别、图像识别，拥有详细的开发指南。

综合比较之后，决定采用百度大脑 API平台。

2.2 微信小程序UI框架

查阅各种微信小程序UI框架资料，决定使用哪种 UI 框架作为本项目的UI框架。WeUI项目地址

简介

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

使用体验

毕竟是微信官方提供的UI框架，界面肯定是与微信小程序的适配度最好。但是感觉没有特别的亮点。

Vant Weapp项目地址

简介

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

使用体验

组件分类做得不错，样式也很简洁美观。

iView Weapp项目地址

简介

一套高质量的微信小程序 UI 组件库

使用体验

界面简单，没亮点。

MinUI项目地址

简介

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广。覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具

使用体验

组件还算齐全，没有亮点。官方Demo还有广告链接。

Wux Weapp项目地址

简介

Wux Weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库。UI 样式可配置，拓展灵活，轻松适应不同的设计风格。60多个丰富的组件，能够满足移动端开发的基本需求。

使用体验

没有特别炫酷的效果，但组件齐全。

ColorUI项目地址

简介

鲜亮的高饱和色彩，专注视觉的小程序组件库。

使用体验

功能齐全，各种组件分类明确。

Taro UI项目地址

简介

一款基于 Taro 框架开发的多端 UI 组件库。基于 Taro 开发 UI 组件一套组件，可以在微信小程序，支付宝小程序，百度小程序，H5 多端适配运行(ReactNative 端暂不支持)。提供友好的 API，可灵活的使用组件。

使用体验

界面简介，功能丰富。经过亲自体验各种UI框架的官方Demo，最后感觉 Taro UI 使我印象很深刻。界面简洁，组件分类明确。我起初决定使用 Taro UI 框架，但是在项目进行到UI设计阶段，发现Taro使用有些许难度，为简化开发过程，最终使用了微信小程序的官方UI框架——WeUI框架。

3 设计方案

在需求分析的基础上，查阅资料，对在小程序设计中可能用到的相关技术做一定的调研分析，做一个概要性的描述。

因为微信小程序本身就是联网的应用平台，因此在微信小程序平台进行图片识别，就不必担心网络连接问题。从源头上追溯，实现图片识别需要用户首先上传图片或拍摄图片，需要解决图片上传问题；之后发送API请求时，图片需要作为请求的参数，需要解决图片转码的问题；最后API请求调用成功后，需要将识别的数据输出，就涉及数据处理以及UI界面设计的问题。通过解决关键的“图片上传”、“图片转码”、“API调用”、“界面设计”这几个问题，就可以实现基本的图片识别小程序了。

4 设计过程

根据初步选定的课程大作业程序设计题目，查找相关资料，结合课本中的案例以及前期的学习，整理设计过程。

图1 设计过程

4.1 百度开放平台注册

图4.1 服务条款

首先登陆百度智能云平台，同意它的服务条款。

之后填写相关的信息，在控制台概览中创建应用。

图4.2 创建新应用

图4.3 获取密钥

现在已经申请好了百度的API接口，下面尝试在微信小程序中进行调用。

4.2 获取asscee_token

在百度AI的官方文档中可以看到，这个API接口有两种调用方式，两种不同的调用方式有相同的接口URL地址，区别在于请求方式和鉴权方式不同。下面我将尝试使用微信小程序中常用的POST请求方式，调用该接口。

图4.4 调用方式

在官方文档中可以看到，使用post请求需要用到access_token，所以现在去查看如何获取access_token。

图4.5获取Access_Token

获取access_token需要下个授权的服务器地址发送post请求，使用固定的参数，即可得到服务器返回的json数据。

图4.6 服务器返回参数

下面就开始进行小程序的编写，实现access_token的获取。

首先，在空的小程序中添加一个按钮，在按钮按下后，调用wx.request方法向服务器发送POST请求。

图4.7 布局文件

按钮绑定事件处理函数，这个事件处理函数就是用来发送POST请求的。

图4.8 绑定事件

上面图片就是编写的事件处理函数，利用wx.request方法，请求百度API的URL地址，请求方式按要求是POST方式。然后分别编写了请求完成、请求成功、请求失败的回调函数，目的就是让我能在控制台中看到请求的状态。

下面就需要在微信小程序的后台添加合法域名，以便wx.request方法能够正确使用。

图4.9 添加域名

箭头所指的就是百度大脑的请求网址，上面那个URL是以前做地图API添加的，这里没有用到。运行模拟器之后成功获取到了access_token的值。

图4.10 获取token

可以看到，控制台执行了success回调函数，成功返回了access_token。现在Access_token的问题已经解决了。接下来就要尝试去请求百度图片识别的API接口了。

通过阅读百度大脑API接口文档，我大概理解了百度API的接口使用方式。看一下下面的API文档的截图就可以了解其流程。

图4.11 请求说明

我们首先需要使用微信封装的request方法请求这个API的URL地址，注意要使用该POST方式。然后这个URL的具体内容就是文档中给出的地址，不同的API接口有不同的请求地址。URL地址需要添加一些参数，如access_token、Content-Type等等。同时，还需要一个image参数作为图片的标识，这个image是将图片转换成了base64编码的格式，也就是将图片传换成了一串字符。

再查阅微信小程序wx.request方法就可以知道，image这个参数可以通过小程序的data属性表示。这样，API接口的请求过程就可以在小程序中表示出来了。

图4.12 参数说明

下面尝试在小程序中进行程序编写。

首先添加一个变量“token”用来存储我获取到的access_token值，然后将success回调函数修改成下图中的代码。

图4.13 调用方式

也就是将token从服务器返回的json数据中提取出来。现在，token已经存储到了变量中。

4.3 图片上传

现在有一个问题，微信小程序怎样获取图片数据呢？微信常用的方式是将用户的图片文件上传到微信开发者的服务器上，服务器接收到图片数据后再进行相关的处理。不管怎样，都首先需要使用微信提供的接口上传图片文件。那么首先研究一下怎样使用微信的图片上传接口。

微信提供了“从本地选择图片或使用相机拍照”的接口“wx.chooseImage”。

图4.14 参数说明

现在尝试使用该接口上传一下图片文件。在逻辑文件中编写图片上传按钮的事件处理函数。

图4.15 获取图片

下面运行小程序，点击上传图片按钮，会弹出系统资源管理器，在里面选择图片文件点击确定，即可成功上传图片文件。在success回调函数中，把上传图片的文件路径放到变量中，再通过控制台显示出来即可。在控制台中显示了图片路径。

图4.16 控制台信息

为了确定图片真的已经上传到了微信小程序中，我现在把上传的图片显示在小程序界面中。小程序文档中指出，tempFilePaths可以作为

组件的src地址，所以显示图片就很方便了。

经过一番调试，该功能终于实现了。首先，在页面布局中添加

组件，该组件的src设置为动态变量imageUrl，以便在图片上传后动态改变。之后编写相应的事件处理函数，首先添加一个默认的图片索引地址，将该图片放到向程序工程目录下，使用data属性保存其路径信息。

图4.17 图片地址

然后在原有的图片上传事件处理函数的基础上，编写增加代码如下：

图4.18 获取图片地址

画横线的代码是图片动态显示的关键代码。这样，就是实现了图片的上传和动态更新。PS：这部分内容参考课本P132“上传头像”部分。

4.4 图片格式转化

好的，现在就可以看一下怎样把图片转换成base64格式的数据了。

经过查找资料，发现将图片转换成base64格式的方式也有不少。我是用一种微信提供的文件管理接口实现的。在上传图片的成功回调函数中(此时已经得到了本地图片地址)，使用文件系统管理方法，读取本地文件的内容。这里指定读取文件的编码格式为base64，然后通过控制台显示出来就可以了。

图4.19 图片转码

上面截了一下关键位置的代码，这部分代码是放在success回调函数中，因为回调函数中已经获取到了上传图片的本地地址。

看一下控制台的信息：

图4.20 控制台信息

可以看到，控制台输出了图片的base64编码值。稍微了解一下base64编码，该编码可以用于HTML环境下的较长信息的标识，只要用于canvas画布的图片显示。它的好处在于，可以在没有上传图片文件的情况下，使用该编码在HTML中插入该图片。这种编码有固定的表示形式：“data:image/jpeg;base64, …”，也有固定的格式转换格式。具体的内容就不再详细研究了。在我的测试中，上传的原图片大小是20.5KB，转换成base64编码之后的数据大小为54.7KB。

4.5 API请求

图片已经准备好了，现在已经可以去调用百度图片识别的API了。下面需要对包括“access_token”、“base64编码”等数据进行整合，并以动物识别为例尝试该API的调用。

首先添加识别按钮，然后编写相应的事件处理函数。

图4.21 识别按钮

事件处理函数就是要进行API接口调用了。

图4.22 识别图片

上面就是按照百度动物识别API文档的要求，结合小程序wx.request方法的属性写出来的事件处理函数。

我在网上搜了一个狗的图片，添加到了小程序文件夹中作为测试图片。运行模拟器进行测试。依次点击“获取access_token”、“上传图片”以及“识别该图片”按钮，在控制台看到API返回的数据。

图4.23 接口返回值

可以看到，在API返回的JSON数据中，标注了识别结果，其中置信度最高的结果是“威尔士柯基”。我特意搜了一下这个“威尔士柯基”，识别结果还是挺准的。

还要测试一下非动物图片的识别情况。现在我继续上传一个头像图片进行测试，看看测试结果。可以看到，非动物也是可以被识别出来的，识别结果只有一个高置信度的“非动物”结果。

图4.24 非动物识别

程序做到这里，可以说最大的障碍已经被克服了。目前已经实现了“动物识别”，下面就是逐步实现“植物识别”、“车型识别”等功能就可以了，他们的基本流程是一样的。

4.6 实现植物识别

现在来整理一下代码，尝试实现“植物识别”功能。

通过阅读API文档可以看出，其实这几种不同的图像识别的接口，只是URL地址不同，其他参数都是一样的。所以我设置了一个变量apiUrl用来存放不同接口的URL地址，为“植物识别”编写一个新的事件处理函数。这个事件处理函数与“动物识别”唯一的不同就是apiUrl不一样罢了。

图4.25 植物识别

可以看到，我把请求接口的URL放到了apiUrl变量中。同时精简了控制台显示的数据，只保留关键的数据。

至于图像识别的事件处理函数，只需要把之前的POST请求地址改成用apiUrl表示就可以了。

图4.26 识别图片

可以看到画横线的那句话，就是把POST地址改了一下，使程序的使用范围更广了。同时还要注意到，我精简了控制台的输出信息，只保留置信度最高的结果。

现在就可以识别植物了。

图4.27 识别植物

现在控制台简洁多了，而且也能正确显示置信度最高的识别结果了。

4.7 实现车辆识别

现在继续做车型识别。现在添加功能就比较简单了，只需修改apiUrl。

这时遇到了一个问题，上传图片的大小错误。

图4.28 控制台信息

为了方便调试，我将控制台信息输出添加了条件判断语句，如果发生错误就输出错误信息，没有错误就输出识别结果。首先测试了图片大小错误的情况，然后测试了正常的图片，控制台输出的信息如下：

图4.29 控制台信息

这样调试就方便多了。现在来解决图片size的问题。以“车型识别”为例，其图片要求如下：

图4.30 图片要求

我刚才上传的“image size error”的图片，其像素为1920px*1080px，符合文档中图片长宽的要求。原图大小为460KB，其编码为base64之后的大小为1.2MB，同样符合要求。这就奇怪了，因为这些参数都是符合文档要求的。

之后我又进行了其他测试，换了一张1920px × 1080px的图片，不会报错。所以看起来图片不合适的原因应该是图片大小的问题。然而，当我继续测试使用2048px × 1335px，原图大小为1.5MB的图片时，竟然可以正常识别。所以这张图片报错的原因暂时没有搞清楚。

先不管这里了，因为我测试了其他图片，都没有出现问题，只有这一张出现图片大小的问题。就先放一下吧。下面整理一下小程序，优化一下界面。

图4.31 界面展示

上图是初始化界面，调整了“识别图片”按钮和图片之间的相对位置，同时添加了文本框显示提示信息。下面以“动物识别”为例，展示识别效果。可以看到，通过添加文本框，可以直观地显示识别结果，非常方便。

图4.32 识别结果

下面就来编写一下样式文件吧。

4.8 Taro样式测试(1)Taro样式介绍

样式文件我想尝试使用UI框架编写，经过对比多种UI框架，最终决定使用Taro UI作为我的UI框架使用。以下是Taro官网介绍：

Taro 是由京东凹凸实验室打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码。

下面就按照官网的教程，尝试在本地小程序中使用该框架进行练习。为了防止原有的小程序结构被破坏，首先新建一个小程序作为练习使用。

Taro需要使用Node.js，要求版本在v8.x 或以上。但我之前安装的版本是v4.4.3，所以现在先重新安装新版本的Node.js。

图4.33 版本查看

图4.34 安装新版本NodeJs

经过重新安装，现在已经升级到了最新的长期支持版本V12.13.1。

图4.35 检查新版本

下面开始项目初始化安装。(2)使用前的准备

首先安装Taro脚手架工具，这里需要使用npm包管理工具进行安装。

图4.36 安装脚手架

之后需要使用Yarn依赖管理工具安装相应的依赖，先来安装Yarn。对于Windows系统，可以下载官方提供的安装器进行安装。安装Taro完成后，可以使用命令安装相应的依赖。

图4.37 安装依赖(3) 安装项目模板

现在到小程序工程目录下，进行Taro模板的创建。这里注意,需要提前安装python2版本。

图4.38 安装模板

现在模板安装完成了，可以进行模块引入了。(4) 引入Taro模块

下面进行taro模块的导入，需要使用npm本地编译taro模块。

图4.39 编译模块

编译完成后，我发现taro工程的目录结构与微信小程序的工程结构不一样。而且taro的样式文件编写的格式也不是wxss格式，这就导致我还要学习一些其他的样式格式规则才能上手编写taro。为了尽快完成小程序，我转向了使用WeUI框架。

4.9 WeUI样式测试(1) WeUI介绍

WeUI 是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。首先到其GitHub网站下载源代码，新建一个工程文件用来进行测试和修改。在微信开发者工具中打开该工程。

图4.40 工程目录

此时模拟器中就可以查看到WeUI框架的各种组件样式。

图4.41 样式展示(2) 样例编写

下面来研究一下WeUI是怎样组织样式编写的。

以Grid样式为例，先看一下他的效果。

图4.42 gird样式效果

再看一下它的布局文件。

图4.43 布局文件

可以看到，他是直接使用了WeUI提供的class，利用wx:for循环实现Grid组件的控制。而逻辑文件中给出了grids变量数组的数据，从0到8表示循环9次，显示9个Grid宫格。

图4.44 Grid逻辑文件

现在尝试将该样式移植到我的小程序中。移植样式最关键的就是它的weui.wxss，按照教程，可以使用外联样式引入的方式将改样式文件引入到项目中。

首先将style文件夹整体复制到我的工程目录中，然后在全局样式中导入weui的样式文件。

图4.45 导入样式

之后创建一个新的页面用来测试样式内容，并将其页面作为默认显示的页面。

图4.46 创建新页面

之后就可以分别在新创建的页面中编写grid布局和逻辑文件，内容与示例代码一样。这样效果就与示例代码相似了。

官方例程中Grid的九个组件，是由组件组成的。组件用于实现页面之间的跳转，而我想要通过button组件实现用户选择不同类型图片的功能，所以需要使用button组件。下面再测试一下button组件的使用。

首先是从官方历程中抽取出我们需要的组件。

图4.47 组件布局

现在就需要移植一下样式文件了。在例程样式文件中找到”weui-btn”、”class”、”page__bd”、”page__bd__spacing”的文件内容，复制到本页面的样式文件中即可。最后实现的效果如下图所示。

图4.48 button效果

下面尝试将原先的逻辑功能与样式结合起来。首先将样式文件复制到index.wxss文件中，然后将原先的button组件的样式改成测试时的样式。

于是模拟器中的样式就改为如下图所示：

图4.49 按钮样式

下面修改标题文本样式，将WeUI的标题文本样式移植到我的程序中。

图4.50 标题样式

下面我想将这三个上传图片的按钮进行水平均匀排布，找到按钮样式相关的样式文件，修改后的样式如下图所示。

图4.51 按钮样式修改

之后，我又修改了上传按钮和文字输出按钮的样式，添加了提示图片和提示信息。最终的样式如下图所示。

图4.52 最终样式

5 关键问题

针对完成大作业过程中遇到的问题，分析描述在此过程中的关键问题，如重点难点等。

本次大作业“微信小程序的图片识别”程序实现过程中，重点问题是“图片上传”、“图片转码”、“API调用”以及“界面设计”。其中图片上传主要使用了微信小程序中的wx.chooseImage方法；图片转码使用wx.getFileSystemMangaer方法解决；API调用使用wx.request方法实现；界面设计使用了微信小程序的官方UI框架实现。

6 使用说明

提供微信小程序体验版的访问方式(小程序码)。

图6.1 小程序码

下面给出完成的微信小程序的使用说明。使用体验版微信小程序，在自己的手机上进行测试。下面将测试过程及截图展示如下。(1)上传图片

用户进入小程序后，首先需要通过相册或拍照，上传需要识别的图片。

图6.2 上传图片

以“动物识别”为例，点击“上传动物图片”按钮，进行图片上传。(2)选择图片

以从相册上传图片为例，点击从相册上传图片按钮，在相册中选择想要识别的图片。

图6.3 选择图片

图6.4 相册选择(3)识别图片

上传图片完成后，点击小程序界面的“识别该图片”按钮，进行图片识别。经过短时间的等待，即可显示识别结果。(4)识别结果

界面下方可以展示图片识别的结果。

图6.5 上传成功

图6.6 识别结果