16、小程序OCR字体识别

一、方法一：直接用wx.request来访问

缺点：需要备案访问百度API的URL，临时测试可以关闭http检查

效果：

//按钮调用

  BtnGetOcr: function () {

    this.GetOcr()

  },

  async GetOcr() {

    //选择图片

    let ret = await this.chooseImg()

    let ImgUrl = ret.tempFilePaths[0]

    //设置图片到界面显示

    this.setData({

      imageUrl: ImgUrl

    })

    //转换图像格式，这个函数虽然是 wx.request 但是不用备案url

    ret = await this.ToBase64(ImgUrl)

    const base64 = wx.arrayBufferToBase64(ret.data);

    //获取accesToken，需要备案url，测试可暂时屏蔽http检查

    ret = await this.GetAccesToken()

    const AccesTokenS = ret.data.access_token

    //由图片和AccesToken获取结果，需要备案url，测试可暂时屏蔽http检查

    ret = await this.BaiDuApi(base64, AccesTokenS)

    //结果输出

    var ssT = "";

    for (let i = 0; i < ret.data.words_result.length; i++) {

      ssT = ssT + "///" + ret.data.words_result[i].words

    }

    //显示结果到界面上

    this.setData({

      OcrRet: ssT

    })

  },

  chooseImg() {

    return new Promise((resolve, reject) => {

      wx.chooseImage({

        count: 1,

        sizeType: ['original', 'compressed'],

        sourceType: ['album', 'camera'],

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

  ToBase64(ImgUrl) {

    return new Promise((resolve, reject) => {

      wx.request({

        url: ImgUrl,

        responseType: 'arraybuffer',

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

  GetAccesToken() {

    var APIKey = 'qUe7CbvLDdtDcHHwYVOdna0g'

    var SecretKey = 'W3GHErGNNy9l5RfAaRh0n8XUbRundCy7'

    return new Promise((resolve, reject) => {

      wx.request({

        url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + APIKey + '&client_secret=' + SecretKey + '&',

        method: 'POST',

        dataType: "json",

        header: {

          'content-type': 'application/json; charset=UTF-8' // 默认值，这里固定

        },

        header: {

          'content-type': 'application/json'

        },

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

  BaiDuApi(base64, accesToken) {

    return new Promise((resolve, reject) => {

      wx.request({

        url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=' + accesToken,

        data: {

          image: base64

        },

        method: 'post',

        header: {

          'Content-Type': 'application/x-www-form-urlencoded'

        },

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

二、方法二：使用云开发

优点：不需要备案任何url

1、新建云函数并安装npm install --save wx-server-sdk@latest

2、安装百度nmp api：npm install baidu-aip-sdk

3、云函数只用到这两个npm，不要在安装多了（如npm install request-promise），多安装的会把npm install baidu-aip-sdk覆盖，导致用不了

4、云函数主体

// 云函数入口文件

const cloud = require('wx-server-sdk')

let AipOcrClient = require("baidu-aip-sdk").ocr;

cloud.init();

// 云函数入口函数

exports.main = async (event, context) => {

  // 设置APPID/AK/SK

  let APP_ID = "18935791";

  let API_KEY = "qUe7CbvLDdtDcHHwYVOdna0g";

  let SECRET_KEY = "W3GHErGNNy9l5RfAaRh0n8XUbRundCy7";

  // 新建一个对象，保存一个对象调用服务接口

  let client = new AipOcrClient(APP_ID, API_KEY, SECRET_KEY);

  let fileID = event.fileID;

  let res = await cloud.downloadFile({

    fileID: fileID,

  })

  let image = res.fileContent.toString("base64");

  // 调用通用文字识别, 图片参数为远程url图片

  return client.generalBasic(image);

  //console.log(result);

  // .then(function (result) {

  //   let result = JSON.stringify(result);

  //   return result;

  // })

}

5、调用

BtnCloud1: function () {

    this.GetOcr1()

  },

  async GetOcr1(path) {

    try {

      //选择图片

      let ret = await this.chooseImg()

      let path = ret.tempFilePaths[0]

      //设置图片到界面显示

      this.setData({

        imageUrl: path

      })

      //上传文件到云文件中，会返回一个文件ID

      ret = await this.UploadImg(path)

      let FileIdS = ret.fileID

      // 云函数调用，传入文件ID

      ret = await this.CloudOcrFunction(FileIdS)

      //结果输出

      var ssT = "";

      for (let i = 0; i < ret.result.words_result.length; i++) {

        ssT = ssT + "///" + ret.result.words_result[i].words

      }

      this.setData({

        OcrRet: ssT

      })

      //删除云文件夹的文件

      ret = await this.DeleteImg(FileIdS)

    }

    catch (e) {

      console.log(e);

    }

  },

  UploadImg(path) {

    //这里名字一定不能用一样的，会造成识别出来结果不更新，一直用上一张图片做识别

    let name = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.'));;

    return new Promise((resolve, reject) => {

      wx.cloud.uploadFile({

        cloudPath: name,

        filePath: path, // 文件路径

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

  CloudOcrFunction(fileidT) {

    return new Promise((resolve, reject) => {

      wx.cloud.callFunction({

        name: "BaiDuOcrTY",//这个名字一定要跟云函数文件夹里的命名一样

        data: {

          fileID: fileidT

        },

        success: function (res) {

          resolve(res)

        },

        fail: function (error) {

          reject(error)

        }

      })

    })

  },

  DeleteImg(path) {

    let name = 'ocr2';

    return new Promise((resolve, reject) => {

      wx.cloud.deleteFile({

        fileList: [path],

        success: (res) => {

          resolve(res)

        },

        fail: (error) => {

          reject(error)

        }

      })

    })

  },

三、云获取AccesToken

//这里只是测试，实际上云识别是不用像本地识别一样，需要获取AccesToken的

1、云函数主体：

// 云函数入口文件

const cloud = require('wx-server-sdk')

var rp = require('request-promise')//配置依赖库

cloud.init()

// 云函数入口函数

exports.main = async (event, context) => {

  var APIKey = 'qUe7CbvLDdtDcHHwYVOdna0g'

  var SecretKey = 'W3GHErGNNy9l5RfAaRh0n8XUbRundCy7'

  let url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + APIKey + '&client_secret=' + SecretKey + '&';

  return await rp({

    uri: url,

    method: 'POST',

    header: {

      'content-type': 'application/json; charset=UTF-8' // 默认值，这里固定

    },

  })

    .then(function (res) {

      return res

    })

    .catch(function (err) {

      return '失败'

    });

}

2、调用

  BtnCloud: function () {

    let that = this;

    wx.cloud.callFunction({

      name: "BaiduOcr",//这个名字一定要跟云函数文件夹里的命名一样

      success: function (res) {

        console.log("成功调用", res),

          console.log("111", JSON.parse(res.result))

      },

      fail: function (res) {

        console.log("失败调用", res)

      }

    })

  },

})

效果：

注：云函数用;的地方假如用了,它编译不会报错，在调用时报：失败调用 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID 93d35ba8-6e38-11ea-af5f-525400e4521d, cloud function service error code -504002, error message Unexpected token return; at cloud.callFunction api