使用 AWS Rekognition 和 Node.js 检测图像中的文本-js教程-PHP中文网

大家好！在本文中，我们将创建一个简单的应用程序，以使用 AWS Rekognition 和 Node.js 执行图像文本检测。

什么是 AWS Rekognition？

Amazon Rekognition 是一项服务，可让您轻松地将图像和视频分析添加到您的应用程序中。它提供文本检测、面部识别、甚至名人检测等功能。
虽然 Rekognition 可以分析存储在 S3 中的图像或视频，但在本教程中，为了简单起见，我们将不使用 S3。
我们将使用 Express 作为后端，使用 React 作为前端。

第一步

在开始之前，您需要创建一个 AWS 账户并设置一个 IAM 用户。如果您已经有了这些，您可以跳过本节。

创建 IAM 用户

登录 AWS： 首先登录您的 AWS 根帐户。
搜索 IAM： 在 AWS 控制台中，搜索 IAM 并选择它。
转到用户部分，然后单击创建用户。
设置用户名，然后在设置权限下选择直接附加策略。
搜索并选择重新识别策略，然后单击“下一步”并创建用户。
创建访问密钥： 创建用户后，选择用户，然后在“安全凭证”选项卡下创建访问密钥。请务必下载包含您的访问密钥和秘密访问密钥的 .csv 文件。
更详细的说明，请参阅AWS官方文档：https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html

配置 aws-sdk

安装 AWS CLI： 在您的系统上安装 AWS CLI。
验证安装： 打开终端或命令提示符并输入 aws --version 以确保 CLI 已正确安装。
配置 AWS CLI： 运行 aws configure 并提供您下载的 .csv 文件中的访问密钥、秘密访问密钥和区域。

项目目录

my-directory/
│
├── client/
│   └── src/
│       └── App.jsx
│   └── public/
│   └── package.json
│   └── ... (other React project files)
│
└── server/
    ├── index.js
    └── rekognition/
        └── aws.rek.js

登录后复制

设置前端

npm 创建 vite @latest。 -- --模板反应
它将在客户端文件夹中创建反应项目。

在 App.jsx 中

import { useState } from "react";

function App() {
  const [img, setImg] = useState(null);

  const handleImg = (e) => {
    setImg(e.target.files[0]);  // Store the selected image in state
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!img) return;

    const formData = new FormData();
    formData.append("img", img);
    console.log(formData);      // Log the form data to the console
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" name="img" accept="image/*" onChange={handleImg} />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

登录后复制

让我们通过确保图像在提交后记录到控制台来测试一下。

现在，让我们转到后端并开始为这个项目制作灵魂。

初始化后端

在服务器文件夹中

npm init -y
npm install express cors nodemon multer @aws-sdk/client-rekognition
我创建了一个单独的文件夹用于重新识别，以处理分析逻辑并在该文件夹内创建一个文件。

//aws.rek.js

import {
  RekognitionClient,
  DetectTextCommand,
} from "@aws-sdk/client-rekognition";

const client = new RekognitionClient({});

export const Reko = async (params) => {
  try {
      const command = new DetectTextCommand(
          {
              Image: {
                  Bytes:params  //we are using Bytes directly instead of S3
              }
        }
    );
    const response = await client.send(command);
    return response
  } catch (error) {
    console.log(error.message);
  }
};

登录后复制

说明

我们初始化一个 RekognitionClient 对象。由于我们已经配置了 SDK，所以我们可以将大括号留空。
我们创建一个异步函数 Reko 来处理图像。在此函数中初始化一个 DetectTextCommand 对象，该对象以字节为单位获取图像。
这个DectedTextCommand专门用于文本检测。
该函数等待响应并返回它。

创建 API

在服务器文件夹中，创建一个文件index.js 或任何你想要的名称。

//index.js

import express from "express"
import multer from "multer"
import cors from "cors"
import { Reko } from "./rekognition/aws.rek.js";

const app = express()
app.use(cors())
const storage = multer.memoryStorage()
const upload = multer()
const texts = []
let data = []

app.post("/img", upload.single("img"), async(req,res) => {
    const file = req.file
    data = await Reko(file.buffer)
    data.TextDetections.map((item) => {
        texts.push(item.DetectedText)
    })
    res.status(200).send(texts)
})

app.listen(3000, () => {
    console.log("server started");
})

登录后复制

说明

初始化express并启动服务器。
我们使用 multer 来处理多部分表单数据，并将其临时存储在缓冲区中。
创建发布请求以从用户处获取图像。这是一个异步函数。
用户上传图片后，该图片将在 req.file 中可用
这个 req.file 包含一些属性，其中有一个 Buffer 属性将我们的图像数据保存为 8 位缓冲区。
我们需要它，因此我们将该 req.file.buffer 传递给 rekognition 函数。分析后，该函数返回对象数组。
我们正在将这些对象中的文本发送给用户。

回到前端

import axios from "axios";
import { useState } from "react";
import "./App.css"; 

function App() {
  const [img, setImg] = useState(null);
  const [pending, setPending] = useState(false);
  const [texts, setTexts] = useState([]);

  const handleImg = (e) => {
    setImg(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!img) return; 

    const formData = new FormData();
    formData.append("img", img);

    try {
      setPending(true);
      const response = await axios.post("http://localhost:3000/img", formData);
      setTexts(response.data);
    } catch (error) {
      console.log("Error uploading image:", error);
    } finally {
      setPending(false);
    }
  };

  return (
    <div className="app-container">
      <div className="form-container">
        <form onSubmit={handleSubmit}>
          <input type="file" name="img" accept="image/*" onChange={handleImg} />
          <br />
          <button type="submit" disabled={pending}>
            {pending ? "Uploading..." : "Upload Image"}
          </button>
        </form>
      </div>

      <div className="result-container">
        {pending && <h1>Loading...</h1>}
        {texts.length > 0 && (
          <ul>
            {texts.map((text, index) => (
              <li key={index}>{text}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

登录后复制