⭐️ 本文首发自前端修罗场(点击加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

Amazon Textract 是 Amazon 推出的一项机器学习服务，可将扫描文档、PDF 和图像中的文本、手写文字提取到文本文档中，然后可以将其存储在任何类型的存储服务中，例如 DynamoDB、s3 等。

今天我将介绍从 React Native 移动应用程序中捕获或选择图像并将这些图像上传到 S3 的过程，然后一旦我们使用 API Gateway 触发 lambda 函数，就会从这些图像中提取数据，然后在处理完数据后我们会将这些数据作为 DynamoDB 记录插入。大致的过程如下图所示：

在开始实战前，我假设你对AWS 的 lambda 函数和 API Gateway 已经了解了。同时，请准备好如下实战环境：

npm or yarn
react-native > 0.59
aws-amplify
nodejs
aws-sdk

我会将内容分为 2 部分来讲解：

前端
后端

前端

在本节中，我们将处理我们在移动应用程序中捕获的图像，并将图像上传到 S3 中，以便我们的后端从这些图像中提取数据。首先，我们将从安装开始：

安装 aws-amplify，它会用在 React Native 中。在命令行中执行如下命令：
npm install aws-amplify
或使用 npm install @aws-amplify/api @aws-amplify/core @aws-amplify/storage 因为我们不需要所有的 aws-amplify 库。
安装 react-native-image-picker : 它能从设备库或相机中选择照片。执行如下命令：
npm install react-native-image-picker

接下来，我们将从实现两个函数开始，一个是用户从库中选择图像，一个是从相机中选择图像：

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';const options = {mediaType: 'photo',quality: 0.5,includeBase64: true,
};
// 从库中选择图像
const libraryPickerHandler = () => {launchImageLibrary(options, async (response) => {if (response.didCancel) {console.log('用户取消了图像选择');} else if (response.errorMessage) {console.log('ImagePicker Error: ', response.errorMessage);} else {await onImageSelect(response?.assets[0].uri);}});};
// 从相机中提取图像const cameraPickerHandler = async () => {launchCamera(options, async (response) => {if (response.didCancel) {console.log('用户取消了图像选择');} else if (response.errorMessage) {console.log('ImagePicker Error: ', response.errorMessage);} else {await onImageSelect(response?.assets[0].uri);}});};

onImageSelect 函数将处理图像上传到 S3，并将 S3 密钥发送到我们将在后端部分开发的 API 端点 /textract-scan：

import Storage from '@aws-amplify/storage';
import API from '@aws-amplify/api';
// or
import { Storage, API } from 'aws-amplify';const onImageSelect = async (uri: string) => {let imageResponse = await fetch(uri);const blob = await imageResponse.blob();// timestamp for random image nameslet naming = `{new Date().getTime()}.jpeg`;const s3Response = await Storage.put(naming, blob, {contentType: 'image/jpeg',level: 'protected',});await API.post('your-endpoint-name', '/main/textract-scan', {body: {imageKey: s3Response.key,},});
};

目前，前端部分就完成了。接下来，看后端部分。

后端

在本节中，我们将处理从将用 nodejs 编写的图像中提取数据。首先安装如下依赖：

aws-sdk，它使你能够轻松地使用 Amazon Web Services。执行如下命令：
npm install aws-sdk or yarn add aws-sdk

我们将创建一个名为 textract.ts 的文件，其中将包含名为 textractScan 的 lambda 函数。textractScan 将是我们的主要函数，它将被前端通过指定的 api 调用。该函数将是一个 post 方法，它将在 body 中获取一个 imageKey 属性。此 imageKey 表示指定 Bucket 中的 S3 对象键。

你需要将其添加到功能块内的 serverless.yml 文件中：

TextractScanLambda:handler: path-to-your-file/textract.textractScanevents:- http:method: postpath: main/textract-scanauthorizer: aws_iam

现在在 textract.ts 文件中，我们开始实现 lambda 函数。让我们首先编写 Textract 函数来分析我们将在 lambda 函数中使用的 Text：

import { Textract } from 'aws-sdk';const analyzeText = async(key: string) => {const payload = {Document: {S3Object: {//the bucket where you uploaded your imagesBucket: 'BUCKET_NAME',Name: key,},},};return new Textract().detectDocumentText(payload);
}

现在我们开始编写我们的 lambda 函数 textractScan：

const textractScan = async (event: AWSLambda.APIGatewayProxyEvent) => {try {console.log(event);const body = JSON.parse(event.body);const { imageKey } = body;const analyzeTextResult = await analyzeText(imageKey);} catch (e) {console.log(e);return {statusCode: 500,body: JSON.stringify({ message: 'ERROR_ANALYZING_DOCUMENT' }),};}
};

现在我们完成了该功能，我们可以使用它从图像中提取文本。 analyzeTextResult 中的结果将包含一个对象数组，其中包含在文档中检测到的文本，但是从该对象中提取我们需要的实际数据将非常耗时。

这就是创建 aws-textract-json-parser 的原因，该库将来自 AWS Textract 的 json 响应解析为更可用的格式，然后你可以将其插入 DynamoDB：

import { DynamoDB } from 'aws-sdk';const textractScan = async (event: AWSLambda.APIGatewayProxyEvent) => {try {console.log(event);const body = JSON.parse(event.body);const { imageKey } = body;const analyzeTextResult = await analyzeText(imageKey);const parsedData = await AWSJsonParser(analyzeTextResult);console.info(parsedData);const rawData = parsedData.getRawData();console.info(data);if (data.length === 0) {console.error('no text detected');return {statusCode: 400,body: JSON.stringify({ message: 'INVALID_DOCUMENT' }),};}const payload = {...someData,textractData: rawData}new DynamoDB.DocumentClient(payload).put;....} catch (e) {console.log(e);return {statusCode: 500,body: JSON.stringify({ message: 'ERROR_ANALYZING_DOCUMENT' }),};}
};

现在，你可以实现许多需要用户拍照的场景，并通过简单的步骤提取数据并将其与他的个人资料相关联。

【云原生】在 React Native 中使用 AWS Textract 实现文本提取相关推荐

React Native 中的 Android 原生模块
当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React ...
云原生（Cloud Native） = 微服务 + DevOps + 持续交付 + 容器化？
目录什么是云原生? 云原生之前云原生云原生简介微服务 DevOps 持续交付容器化云原生的发展历程云原生技术生态现状云原生基金会 -- CNCF 云原生技术社区云原生技术产业我们正 ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
如何在 React Native 中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
【React Native】在原生和React Native间通信（RN调用原生）
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...

【云原生】在 React Native 中使用 AWS Textract 实现文本提取

前端

后端

【云原生】在 React Native 中使用 AWS Textract 实现文本提取相关推荐

最新文章

热门文章