大家好!在本文中,我們將創建一個簡單的應用程序,以使用 AWS Rekognition 和 Node.js 執行圖像文字檢測。
什麼是 AWS Rekognition?
Amazon Rekognition 是一項服務,可讓您輕鬆地將圖像和視訊分析添加到您的應用程式中。它提供文字偵測、臉部辨識、甚至名人偵測等功能。
雖然 Rekognition 可以分析儲存在 S3 中的圖像或視頻,但在本教程中,為了簡單起見,我們將不使用 S3。
我們將使用 Express 作為後端,使用 React 作為前端。
第一步
在開始之前,您需要建立一個 AWS 帳戶並設定 IAM 使用者。如果您已經有了這些,您可以跳過本節。
建立 IAM 使用者
設定 aws-sdk
專案目錄
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); } };
說明
建立 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"); })
說明
回到前端
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;
最終輸出
點擊「上傳圖片」按鈕後,後端處理圖片並返回偵測到的文本,然後將其顯示給使用者。
完整的程式碼,請查看我的:GitHub Repo
謝謝! ! !
追蹤我:Medium、GitHub、LinkedIn、X、Instagram
以上是使用 AWS Rekognition 和 Node.js 檢測圖像中的文本的詳細內容。更多資訊請關注PHP中文網其他相關文章!