포시코딩

개요 이전 포스팅에 이어 업로드한 이미지에 대해 원하는 부위를 자르는 방법에 대해 알아보자 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"; ..