微信小程序基于百度云实现图文识别

前言

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

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

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

根据需要选择开通的项目

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

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

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中如何实现识别功能的，大家可移步博主另一篇文章