WPS AirScript脚本合集（十五）：调用百度智能云OCR服务识别图片内容

#多维表格#Air Script#图片识字
bokuto
bokuto

因字数限制，内容做部分删减，完整文章见公众号文章链接：https://mp.weixin.qq.com/s/2fkNeV0y34xnE71cZRaD2Q

一、百度智能云OCR服务

新手操作指引看这里：https://cloud.baidu.com/doc/OCR/s/dk3iqnq51

首先注册及实名认证，平台会自动为账户发放免费的测试资源，然后创建应用。总之照着新手操作指引一步步来，保证不会迷路滴

调用OCR服务接口方法看这里：https://cloud.baidu.com/doc/OCR/s/skruaza7j

该文章主要演示了使用Postman调用OCR服务接口的操作过程

是不是用Postman不重要，主要弄清楚接口的请求格式、请求地址和传递参数即可，这个为后续编写AirScript脚本内容有很大关联哦，需要仔细阅读（敲黑板，划重点ing）

二、WPS网络API开发指南

由于涉及到发送HTTP请求服务，所以需要先在脚本编辑器对应的脚本内添加网络API

对应的开发指南看这里：https://open.wps.cn/documents/app-integration-dev/guide/dbsheet/AirScript/AirScript-advanced-http.html

需要重点看下fetch函数的用法哦，后面会用到（先剧透下～

三、多维表格数据表及字段结构

在多维表格点击按钮即刻生成草料二维码的数据内容数据内容的基础上新增两列文本“员工工牌图片URL”和“图片识别结果”，完整内容如下：

1、数据表名：SVT员工工牌

2、视图名：表格视图

3、字段设置：

  • 字段名称：cliD二维码编码内容 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：cliP1图片 - 字段类型：图片和附件 -显示样式：已缩略图样式显示 - 图片上传方式：无需勾选 仅可通过移动端拍摄上传

  • 字段名称：cliF3本名 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：cliF4外文名 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：cliF7职业 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：cliF5出生日期 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：cliF6代表作 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：点击生成 - 字段类型：按钮 - 执行操作：点击按钮时，触发执行AirScript脚本 - 执行成功的提示：ψ(｀∇´)ψ请查收员工工牌 - 按钮名称：点击按钮 - 按钮颜色：蓝色

  • 字段名称：员工工牌 - 字段类型：图片和附件 -显示样式：已缩略图样式显示 - 图片上传方式：无需勾选 仅可通过移动端拍摄上传

  • 字段名称：员工工牌图片URL - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

  • 字段名称：图片识别结果 - 字段类型：文本 - 禁止录入重复值：否 - 默认值：无

四、自动化流程设置

4.1 生成草料二维码名片

4.2 图片识别

注意“执行AirScript脚本”-配置参数-脚本入参和脚本返回值需切换英文输入法输入，如果第3步“修改记录”-配置参数-设置字段值点击+号无“第2步AirScript脚本的返回值”，需检查第2步“执行AirScript脚本”中配置参数-脚本入参和脚本返回值输入内容是否正确！

五、AirScript脚本

因字数限制，脚本代码内容做删减，完整文章见公众号文章链接：https://mp.weixin.qq.com/s/2fkNeV0y34xnE71cZRaD2Q

六、图片文字识别脚本逻辑解释

6.1 配置填写

// 配置区
const ClientId = '填写百度智能云文字识别应用API的API Key';
const ClientSecret = '填写百度智能云文字识别应用API的Secret Key';

根据新手操作https://cloud.baidu.com/doc/OCR/s/dk3iqnq51，当在百度智能云平台注册账户并创建完应用后，点击文字识别的应用列表，可以查看对应应用的API Key和Secret Key，上述代码根据实际情况修改为自己账户应用的API Key和Secret Key

重要说明！API Key和Secret Key是调用该应用内接口的凭证，如果泄露会导致资源被盗刷，请妥善保管，避免外泄！

6.2 数据获取

看代码注释不难理解，这段代码的内容主要是获取当前记录ID和附件字段的值，然后创建URL数组和结果数组，使用for循环将每个附件的URL添加到urlArray中

需要根据实际情况修改表名（对应"SVT员工工牌"）、视图名（对应"表格视图"）和字段名（对应"@员工工牌"）

// 1. 获取当前记录ID
const recordid = Context.argv.recordid || Application.Selection.GetSelectionRecordIds()[0][0];
console.log("当前记录ID:", recordid);

// 2. 获取附件字段的值
const dbCellValue = Application.Sheets("SVT员工工牌").Views("表格视图").RecordRange(recordid, "@员工工牌").Value;
const attachments = dbCellValue.Value;

// 3. 创建URL数组和结果数组
const urlArray = [];
const recognitionResults = [];

// 将每个附件的URL添加到urlArray中
for (let i = 0; i < attachments.length; i++) {
  const attachment = attachments[i];
  console.log("LinkUrl:", attachment.LinkUrl);
  urlArray.push(attachment.LinkUrl);
}

console.log("URL数组:", urlArray);

WPS脚本编辑器控制台输出示例如下：

6.3 获取Access Token

相关代码如下：

// 4. 获取Access Token
const resp1 = HTTP.fetch('https://aip.baidubce.com/oauth/2.0/token', {
  method: 'POST',
  timeout: 2000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: `grant_type=client_credentials&client_id=${encodeURIComponent(ClientId)}&client_secret=${encodeURIComponent(ClientSecret)}`
});

const tokenResult = resp1.json();
console.log("access_token:", tokenResult.access_token);
const AccessToken = tokenResult.access_token;

这里使用到WPS多维表格网络API的fetch函数，具体写法官方文档https://open.wps.cn/documents/app-integration-dev/guide/dbsheet/AirScript/AirScript-advanced-http.html也给了示例

那怎么根据WPS网络API的fetch函数用法与百度智能云文档接口调用的文档对应起来呢？

别急，我们来步步拆解！

百度智能云文字识别接口调用文档https://cloud.baidu.com/doc/OCR/s/skruaza7j获取Access Token步骤写明了请求地址是https://aip.baidubce.com/oauth/2.0/token，所以fetch函数第1个参数url要修改为对应需要访问的网络地址

请求格式是“POST”，所以method: 'POST'；

请求头headers: {'Content-Type': 'application/x-www-form-urlencoded'}，表明告诉服务器发送的数据是表单数据；

请求体body需要输入3个请求参数grant_type、client_id和client_secret，所以body: `grant_type=client_credentials&client_id=${encodeURIComponent(ClientId)}&client_secret=${encodeURIComponent(ClientSecret)}`

HTTP请求发送后，我们只需要获取返回值中的access_token即可，使用AccessToken 变量存储。

6.4 针对每个URL进行文字识别

相关代码如下：

因字数限制，脚本代码内容做删减，完整文章见公众号文章链接：https://mp.weixin.qq.com/s/2fkNeV0y34xnE71cZRaD2Q

（发帖子什么时候能将限制字数从5000调整到10000啊T^T，每次都要删内容好心累）

与前面第一个HTTP请求类似，此次请求的地址是https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic，请求格式依然是“POST”

需要注意的是需要传入请求参数：第1个请求获取的access_token，拼接在请求地址后面，所以fetch函数第1个参数传入'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=&#39; + AccessToken

文档中使用的是image键传入图片base64编码后的结果值，由于此次教程获取的是图片URL，不是图片数据本身，所以改为使用url参数，需要确保图片URL可公开访问且不含特殊字符哦，对应此行代码body: `url=${encodeURIComponent(currentUrl)}`

使用ocrResult存储请求返回值，并对文字识别结果进行处理，提取返回值words的值并进行文本拼接

WPS脚本编辑器控制台输出示例如下：

6.5 拼接所有图片的识别结果

相关代码如下：

// 7. 将所有识别结果合并为一个完整的字符串
const finalResult = recognitionResults.join('\n\n============\n\n');
console.log("最终识别结果字符串:", finalResult);

// 返回最终结果
return {
  urlArray: `${urlArray}`,
  finalResult: `${finalResult}`
}

当图片与附件字段存在不止一张图片时，每张图片都会提取对应的URL并调用OCR进行图片文字识别，每张图片的识别结果都存储在结果数组中，由于输出单元格只有1个，为了输出格式可观，需要将所有识别结果合并为一个完整的字符串输出到指定行记录的对应字段中

WPS脚本编辑器控制台输出示例如下：

七、动图演示

场景一：直接点击按钮生成草料二维码内容自动识别

场景二：直接上传多张图片进行文字识别

当需要识别的图片不止一张时，“图片URL”字段内容显示使用英文逗号分隔每张图片的URL，“图片识别结果”字段内容显示使用===分隔每张图片的文字识别结果

WPS多维表格 WPS多维表格 使用教程
广东省
浏览 33
收藏
点赞
分享
+1
2
+1
全部评论 2
 
欲水
欲水
学习
· 四川省
回复
bokuto
原来是老熟人一起加油吖
· 广东省
回复