포시코딩

https://cchoseonghun.github.io/OCR_Helper OCR Helper Camera Upload Reset Preview Default Grayscale OTSU Change Excel Download cchoseonghun.github.io https://github.com/cchoseonghun/OCR_Helper GitHub - cchoseonghun/OCR_Helper: Free Online OCR Free Online OCR. Contribute to cchoseonghun/OCR_Helper development by creating an account on GitHub. github.com 진행기간 2023년 6월 21일 ~ 7월 27일(약 한달) 기능 인식을 위한 이..

개요 이전 포스팅에서 잘라낸 이미지를 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"; ..

document.addEventListener('keydown', (e)=>{ 이벤트리스너로 방향키가 눌릴때마다 ctx.clearRect(0, 0, canvas.width, canvas.height); 캔버스를 깨끗이 지워준다음 다시 그리게 할거임 if(e.code == 'ArrowLeft'){ 왼쪽키가 눌릴때 왼쪽으로 50 만큼 이동하게 할건데 0 아래로 이동하면 화면 밖으로 나가버리니 if(snakeHead.x > 0){ snakeHead.x -= 50; 조건을 달아준 후 이동되게 한다. 다른 방향키들에도 각각 조건에 맞게 입력하면 document.addEventListener('keydown', (e)=>{ ctx.clearRect(0, 0, canvas.width, canvas.height); i..

면접 후기 글을 보다가 Snake game 을 만들어보게 했다는 글이 있어 저번에 했던 Dino game 을 응용하면 될 것 같아 만들어봤다. Snake html 은 간단하게 제목과 게임이 들어갈 canvas 태그만 작성하고 snake.js 를 불러옴 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; canvas 세팅해준 후 배경맵, snake(플레이어), rat(타겟) 변수를 만듦 처음 만드는거니 일단 자동으로 앞으로 가는게 아니라 한칸한칸 움직이게 하고서 천천히 업그레이드 해 나갈 계획이다. snake 는 내가 움직이는 sn..