포시코딩

개요 이전 포스팅에서 잘라낸 이미지를 Tesseract로 인식하기 전에 좀 더 정확한 결과물을 얻고자 전처리를 하려 한다. 찾아보니 보통 원본 -> Grayscale(그레이스케일) -> Binary(이진화) 과정을 거치는데 그레이스케일 과정은 이미 해봤고 이진화 작업을 진행하려 한다. 다행히 OpenCV.js 공식 문서에서도 이진화 방법인 Thresholding에 대해 소개하고 있었다. https://docs.opencv.org/3.4/d7/dd0/tutorial_js_thresholding.html OpenCV: Image Thresholding Goal In this tutorial, you will learn Simple thresholding, Adaptive thresholding, Otsu's..

개요 https://4sii.tistory.com/608 디아블로4 경매 사이트 만들기 (5) - OpenCV.js Template Matching 개요 https://4sii.tistory.com/607 디아블로4 경매 사이트 만들기 (4) - Vue에서 Drag&Drop, Crop, Tesseract 사용하기 개요 지금까지 React를 사용했지만 더 다양한 언어를 경험하고자 Vue를 사용하기로 결정했다. 4sii.tistory.com 이전 포스팅에서 opencv의 Template Matching 기능을 통해 미리 세팅해놓은 테두리 이미지와 일치하는 부분을 찾는 과정까지 진행해봤다. 이번에는 찾아낸 일치하는 부분을 tesseract를 통해 텍스트 인식을 시키기 위해 따로 잘라낼 건데 이 잘라내는 기능 ..

개요 https://4sii.tistory.com/607 디아블로4 경매 사이트 만들기 (4) - Vue에서 Drag&Drop, Crop, Tesseract 사용하기 개요 지금까지 React를 사용했지만 더 다양한 언어를 경험하고자 Vue를 사용하기로 결정했다. 마침 비교적 최근에 Vue 3.0 업데이트가 있어서 기존과 다른 부분이 생겼는데 아래 링크를 통해 확인 4sii.tistory.com 위 글에서 이어진다. 지금까지 업로드한 사진에 대해 특정 부분을 crop하고 해당 부분에서 텍스트 인식하는 방법까지 알아봤다. 다만, 텍스트 전체를 인식하기엔 인식률이 떨어져서 전처리 작업으로 보통 OpenCV를 통해 그레이스케일 작업을 거치기 때문에 나도 마찬가지로 그레이스케일을 진행하기로 결정했다. 그레이스케일..

개요 지금까지 React를 사용했지만 더 다양한 언어를 경험하고자 Vue를 사용하기로 결정했다. 마침 비교적 최근에 Vue 3.0 업데이트가 있어서 기존과 다른 부분이 생겼는데 아래 링크를 통해 확인 가능하다. https://4sii.tistory.com/606 [Vue 3.0] data()와 methods() 대신 setup() 사용하기 개요 오랜만에 Vue를 통해 프론트엔드를 구현하게 되었는데 Vue 2.0때와 사용 방법이 크게 달라지는 부분이 있어 포스팅하게 되었다. Before export default { data() { return { inputRef: null, uploadedImage: '', }; } 4sii.tistory.com 이제 세 번에 걸쳐 진행한 이미지를 드래그 앤 드랍으로 ..

개요 이전 포스팅에 이어 업로드한 이미지에 대해 원하는 부위를 자르는 방법에 대해 알아보자 crop 기능이라고 하는데 이것도 마찬가지로 라이브러리를 통해 간단히 구현할 수 있다. https://github.com/react-cropper/react-cropper GitHub - react-cropper/react-cropper: Cropperjs as React component Cropperjs as React component. Contribute to react-cropper/react-cropper development by creating an account on GitHub. github.com react-cropper 라이브러리를 사용할 것이다. 설치 npm install react-crop..

개요 이미지를 input 태그로 폴더에서 찾아 넣는 방법은 너무 간단하니 드래그 앤 드랍으로 추가하는 방법을 공부해보았다. 만들기 어려울줄 알았는데 onDrop 이벤트 덕분에 매우 쉽게 구현할 수 있었다. 코드 App.js import './App.css' import { useState } from "react"; function App() { const [imagePath, setImagePath] = useState(""); const handleChange = (e) => { const tempImagePath = URL.createObjectURL(e.target.files[0]); setImagePath(tempImagePath); } const handleDrop = (e) => { e.pr..

개요 https://4sii.tistory.com/602 [OCR] Tesseract.js https://4sii.tistory.com/601 [OCR] Tesseract 사용방법 (mac) 설치 homebrew install tesseract pip install pytesseract pip install pillow # 이미지 분석, 처리 라이브러리 테스트 코드 test.py 파일과 테스트할 이미지를 같은 위 4sii.tistory.com Tesseract를 통해 이미지의 텍스트 인식 기능까지 확인을 마쳤고 실제로 사용하게될 리액트 상에서의 기능 구현을 진행해보았다. 코드 import Tesseract from 'tesseract.js'; import { useState } from "react"; ..