nodejs 이용해서 이미지에 있는 text 추출하는 방법

1. tesseract.js, jimp, fs를 설치합니다. 

npm i express tesseract.js jimp fs

 

2. 현재 이 코드를 복사해서 붙여놓습니다. 

const express = require('express');
const Tesseract = require('tesseract.js');
const Jimp = require('jimp');
const fs = require('fs');

const app = express();
app.use(express.json());

app.post("/extract-text", async (req, res) => {
  const { imageUrl } = req.body;

  // 로그 추가: imageUrl 확인
  console.log("Received imageUrl:", imageUrl);

  if (!imageUrl) {
    return res.status(400).json({ error: "Image URL is required" });
  }

  try {
    console.log("Downloading image from URL:", imageUrl);
    // 이미지 다운로드
    const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
    const buffer = Buffer.from(response.data, 'binary');
    const imagePath = './downloaded_image.jpg';
    const processedImagePath = './processed_image.jpg';

    // 다운로드한 이미지를 로컬 파일로 저장
    fs.writeFileSync(imagePath, buffer);

    // 이미지 전처리 (grayscale, increase contrast, resize)
    console.log("Processing image...");
    const image = await Jimp.read(imagePath);
    await image
      .resize(800, Jimp.AUTO) // 이미지 크기 조정
      .greyscale() // 그레이스케일로 변환
      .contrast(0.5) // 대비 증가
      .brightness(0.1) // 밝기 증가
      .writeAsync(processedImagePath);

    // OCR로 텍스트 추출
    console.log("Extracting text with Tesseract...");
    const { data: { text } } = await Tesseract.recognize(
      processedImagePath,
      'kor+eng', // 한글과 영어 인식
      {
        logger: m => console.log(m)
      }
    );

    console.log('Extracted Text:', text);


  } catch (error) {
    console.error("Error processing request:", error);
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

 

추가 설명 

 

ocr에서 text 추출하는것은 tesseract.js인데 추가적으로 jimp를 설정한 이유는 예를 들어서 명함을 캡쳐할 때 명함에 먼저 네모난 모양에 명함 모양이 있을거고 그안에 text가 존재할텐데 tesseract.js만 사용하게 되면 글자들이 다 깨져서 나옵니다. 

그래서 jimp로 이미지를 전처리를 해야 그 안에 text를 가지고 올 수 있고 추후에 그 text를 정규식을 이용해서 원하는 값만 가지고 오는 것도 가능합니다. 

 

3. 간단하게 확인하고 싶으면 postman에서 post설정하고 해당 host 및 body를 json형식으로 설정해서 의도한 값이 나오는 지 확인합니다. 

추가 설명

현재 코드로 테스트하시는 거면 보이는 이미지에 보이는데

api end point: http://localhost:3000/extract-text

body: {"imageUrl": 이미지url}

넣으시면 됩니다. 

 

이미지 url 생성 방법은 https://junhee6773.tistory.com/entry/Pinata%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-url-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95

Pinata에서 이미지 url 만드는 방법

참고하시면 됩니다. 

 

알게된 점

원래 계획은 gpt 4 모델을 이용해서 이미지를 업로드하면 거기서 text를 가져와서 의도한 값을 가지고 오는 줄 알았는데 처음에는 지금처럼 tessaract.js, jimp를 이용해서 text를 가져오거나 아니면 google console 도구를 이용해서 가져오는 것을 알게 되었습니다.

그 이후에 gpt를 연결하면 text에서 정규식으로 가지고 올 수 없는 부분을 의도에 맞게 값을 셋팅할 수 있는 것을 알게 되었습니다.