微信小程序基于百度云实现图文识别（胎教级教程）

前言

最近开发微信小程序用到了图文识别的功能，刚开始还觉得很难，但其实配合一些第三方api接入，实现这个功能还是很简单的，下面我们一起来看看要怎么实现这个小功能吧。

1.首先我们需要注册一个百度云账号（百度云地址）

2.注册完毕后搜索文字识别

3.点击创建应用，然后根据需求开通需要的功能

根据需要选择开通的项目

创建完后直接点击查看创建应用详情

4.复制已经创建应用的 AppID、API Key、Secret Key 的值，代码中会用到

5.上面一系列操作完成后，打开微信小程序社区平台配置服务器域名（微信小程序社区平台）

6.项目中使用

实例

index.wxml

<!-- 识别按钮 -->
<view class="btnBox"><button bindtap="doUpload">点击图文识字</button>
</view>
<!-- 识别的图片 -->
<view class="imgBox"><image src="data:image/png;base64,{{imageUrl}}" mode="aspectFit" />
</view>
<!-- 识别出来的内容 -->
<view class="contantBox">识别出来的内容：<text>{{contant}}</text>
</view>

index.js

Page({data: {contant: "", //识别内容imageUrl: "", //识别的图片},// 获取百度access_token  getBaiduToken: function () {var apiKey = 'NT0xub7LOs1rY6sM3a0LeZy7' //百度云上的apiKeyvar secKey = 'VpdqP4FjnPV0c7sXK3S128U07GYml5sQ' //百度云上的secKeyvar tokenUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secKey}`; //调用百度云api接口var that = this; //防止this指向问题// 发送请求wx.request({url: tokenUrl,method: 'POST',dataType: 'json',header: {'content-type': 'application/json; charset-UTF-8'},// 返回数据success: function (res) {that.setData({baiduToken: res.data.access_token})},// 错误信息fail: function (res) {console.log("[BaiduToken获取失败]", res);}})},// 百度ORC接口调用  scanImageInfo: function (imageData) { // 将图片转换成base64格式var that = this; //防止this指向问题const detectUrl = `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${that.data.baiduToken}` // 调用百度云api接口并传递baiduTokenreturn new Promise(function (resolve, reject) {// 发送请求wx.request({url: detectUrl,data: {image: imageData},method: 'POST',dataType: 'json',header: {'content-type': 'application/x-www-form-urlencoded'},// 返回数据success: function (res, resolve) {var dataList = res.data.words_result[0].wordsconsole.log(res.data.words_result[0].words, "识别内容");// 赋值给data中定义的变量that.setData({contant: dataList})},// 错误信息fail: function (res, reject) {console.log('get dataList fail：', res.data);},})})},// 上传图片  doUpload: function () {var that = thisthat.getBaiduToken() // 提前获取access_Token// 选择图片，拍照或从相册中获取wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {wx.showLoading({title: '上传中',})const filePath = res.tempFilePaths[0]// 上传图片        wx.getFileSystemManager().readFile({filePath: filePath,encoding: 'base64',// 返回数据success: function (res) {console.log("图片数据", res);// 识别的图片复赋值that.setData({imageUrl: res.data})that.scanImageInfo(res.data); // 调用百度API解析图片获取文字      },// 错误信息fail: function (res) {console.log("[读取图片数据fail]", res)},complete: function (res) {wx.hideLoading()}})}})},
})

index.wxss

.btnBox {padding: 10px 20px;
}.btnBox button {border-radius: 4px;background: rgb(95, 178, 90);color: white;font-size: 14px;
}.imgBox {margin: 0px 20px 10px 20px;height: 100%;display: flex;justify-content: center;
}.contantBox {padding: 0px 20px;
}.contantBox text {font-weight: bold;
}

实现效果

有关于在vue中如何实现识别功能的，大家可移步博主另一篇文章 vue基于百度云实现行驶证识别

微信小程序基于百度云实现图文识别（胎教级教程）相关推荐

微信小程序基于OCR插件实现图文识别（超简单）
前言前几天写了一个有关于微信小程序图文识别的功能,当时引用的是第三方百度云api实现的,那微信小程序官方有没有自带的方法或者插件能实现这个功能呢?经实践,还真有那么一个合适的插件,相对比第三方的调用 ...
微信小程序利用百度api达成植物识别
看完本文你可学会: 如何使用百度智能云如何在微信小程序中去接入百度api,达成植物识别的效果如何使用百度智能云? 官网:https://cloud.baidu.com 进入官网,在用户中心下选择图 ...
Django2.0＋小程序技术打造微信小程序助手百度云
原文配套视频资源获取链接:点击获取原文配套源码资源获取链接:点击获取第1章课程导学第2章小程序开发入门从几个方面介绍小程序开发相关的内容,包括小程序开发者账号注册.小程序开发流程.小程序开 ...
微信小程序开发百度云分享
地址:https://pan.baidu.com/s/1O-VDu-VqcZsG-mDqxfbRSw#list/path=%2F 密码: sxm6
微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
微信小程序录音第一篇（基于微信小程序及百度AI的人员语音识别转文字显示小程序）
基于微信小程序及百度AI的人员语音识别转文字显示小程序基于微信小程序及百度AI的人员语音识别转文字显示小程序主要分3篇 1.微信小程序录音篇(小程序基于wx.startRecord()微信语音录 ...
微信小程序基于云数据库实现点赞功能
微信小程序基于云数据库实现点赞功能微信小程序基于云数据库实现点赞功能小Tips 2022.04.27 更新微信小程序基于云数据库实现点赞功能首先你要开通云开发,然后点击数据库创建集合(这里我的 ...
【中级】微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析
1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...
【基础问题】微信小程序 - 腾讯云 - 一站式方案 - PHP - wafer 和 wafer2的区别和wafer2的实践
前言: 项目目前选择了腾讯小程序一站式部署,反而有点懵了,服务器怎么配置呢?好像接口没有,查询后,发现有的Demo有服务器配置有的没有,折腾观察了一会,原来有两个版本wafer.我把关键的地方高亮了, ...

微信小程序基于百度云实现图文识别（胎教级教程）

前言

实现效果

微信小程序基于百度云实现图文识别（胎教级教程）相关推荐

最新文章

热门文章