포시코딩

개요 Computer Vision 오픈 소스 라이브러리인 OpenCV.js를 통해 이미지 흑백처리, 이진화 등의 전처리 작업을 진행할 수 있다. https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html OpenCV: OpenCV.js Tutorials Core Operations In this section you will learn some basic operations on image, some mathematical tools and some data structures etc. docs.opencv.org 세팅 https://docs.opencv.org/3.4/d0/d84/tutorial_js_usage.html 위 링크에 들어가면 opencv.js 파..

개요 이미지상의 텍스트 인식을 도와주는 라이브러리 C++로 만들어진 Tesseract OCR engine의 JavaScript 포팅 버전이다. https://github.com/naptha/tesseract.js GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥 Pure Javascript OCR for more than 100 Languages 📖🎉🖥 - GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥 github.com 세팅 문서상의 Installation 항목을 따라하면 된다. 나는 CDN 링크를 사용할 거..

개요 canvas를 활용한 이미지 자르기 기능을 도와주는 라이브러리 저장된 이미지 또는 업로드한 이미지를 원하는 크기만큼 잘라 활용할 수 있다. https://fengyuanchen.github.io/cropperjs/ Cropper.js fengyuanchen.github.io https://github.com/fengyuanchen/cropperjs/tree/main GitHub - fengyuanchen/cropperjs: JavaScript image cropper. JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub. github.com 세팅 Croppe..

개요 이전 포스팅에서 잘라낸 이미지를 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://www.acmicpc.net/problem/2343 2343번: 기타 레슨 강토는 자신의 기타 강의 동영상을 블루레이로 만들어 판매하려고 한다. 블루레이에는 총 N개의 강의가 들어가는데, 블루레이를 녹화할 때, 강의의 순서가 바뀌면 안 된다. 순서가 뒤바뀌는 경 www.acmicpc.net 풀이 문제를 풀 때 항상 헷갈리는 문제 중 하나인 이진 탐색을 쉽게 푸는 방법에 대해 소개해보고자 한다. 위 문제를 예로 설명하겠음 문제 정리 문제를 요약하면 다음과 같다. 강의의 수 = N, 블루레이 개수 = M, 강의 길이 배열 = arr M개의 블루레이에 강의를 나눠 담을 때 블루레이 크기의 최소값 구하기 = 정답 블루레이 크기를 평균값을 통해 유추하며 줄여나가 조건에 부합하는 최소값을 되기에..

개요 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 이제 세 번에 걸쳐 진행한 이미지를 드래그 앤 드랍으로 ..

개요 오랜만에 Vue를 통해 프론트엔드를 구현하게 되었는데 Vue 2.0때와 사용 방법이 크게 달라지는 부분이 있어 포스팅하게 되었다. Before export default { data() { return { inputRef: null, uploadedImage: '', }; }, methods: { handleChange(e) { // change 이벤트 함수 showImage(); }; handleDrop(e) { // drop 이벤트 함수 showImage(); }; showImage() { } }, }; 기존이 위처럼 data에서 변수명을 선언하고 methods에서 함수를 선언해 사용했다면 After import { ref } from 'vue'; export default { setup() ..

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