百度云助力微信小程序图文识别，让你的应用更加高效智能

前言

如今人们对于信息的获取需求越来越高，而图像识别技术的发展为我们带来了更加便捷高效的信息获取方式。微信小程序作为一种新型的应用形态，越来越受到用户的青睐。而本文将为大家介绍微信小程序基于百度云的图文识别技术。让我们一起来看看微信小程序基于百度云实现图文识别的奇妙之处吧！

---

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' //百度云上的apiKey
    var secKey = 'VpdqP4FjnPV0c7sXK3S128U07GYml5sQ' //百度云上的secKey
    var 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接口并传递baiduToken
    return 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].words
          console.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 = this
    that.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基于百度云智能实现轻松上手
⭐ 巧用微信小程序 OCR 插件，图文识别从此变得简单