使用 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;

登入後複製