신용카드 결제 내역을 간편하게 캡처해,
화면에 표시된 금액을 합산하거나 n으로 나누는 계산 도구를 직접 구현해보았습니다.
또한, opencv.js를 활용하여 이미지 전처리하는 방식도 함께 소개하려 합니다.
이 계산 도구는 친구나 지인과 함께 사용한 금액을 n빵으로
간편하게 나눌 수 있는 기능을 중심으로 설계되었습니다.
필수적으로 만들어야하는 기능의앱인가 고민했는데요
저는 종종 지인들과의 모임에서 한 사람이 대신 결제를 하게 되고
그 비용을 n으로 나누어야 하는 상황이 발생하여 이러한 계산 도구의 필요성을 느꼈습니다.
더 중요한 것은,
이 프로젝트를 통해 opencv, tessract와 같은 기술을 경험하고 연구하는 것에 큰 의미를 두었습니다.
이미지 개선 방법에 대해서 대략적으로 웹서치를 통해서 알아보았지만
chatGpt에게 다시 물어봅니다.
이미지를 이진화하여 이미지 정보가 특정 값을 넘으면 강조하여
대비를 만드는 방법이 thresholding 입니다.
먼저, 임계값 처리를 위해선 이미지를 흑백으로 변환해야 하는데,
이를 위해서는 COLOR_RGB2GRAY 변환을 사용합니다.
흑백 이미지로 변환하면 임계처리가 보다 효율적으로 이루어지기 때문으로 생각됩니다.
OTSU 옵션을 활용하여 임곗값을 자동으로 찾을 수 있지만, OCR의 인식률 향상에 큰 도움이 되지 않았기에
계산기앱에는 적용하지 않았습니다.
2가지 확실한것은
이미지의 크기를 조절하는 것이 OCR의 텍스트 인식률을 높이는 데 도움이 되었음을 확인했으며,
이미지를 흑백으로 변환함으로써도 인식률이 향상되는 것을 알 수 있었다.
1. gray 변경하기
2. 사이즈 변경하기
참고로 opencv.js 를 이용하는것도 웹서칭을 제법해야했습니다.
홈페이지가 왜이리 믿음이 안가게 만들어졋는지요
리액트에서 opencv.js를 편리하게 사용하기 위해 react-opencv 패키지를 설치했습니다.
그러나 이 패키지는 필수적으로 설치해야 하는 것은 아닙니다.
ChatGPT의 도움으로 opencv.js를 리액트에 적합하게 쉽게 적용할 수 있었습니다.
배포에 대한생각.
원래 배포할 때 opencv.js 파일은 로컬에 저장되어 있었습니다.
그러나 netlify에서의 배포를 위해 해당 파일 위치를 CDN으로 수정했습니다.
react-opencv + opecv.js
이렇게 2개가 필요합니다. react-opencv는
리액트에서 사용을 쉽게하도록 하는 라이브러리.
내부 구조가 매우 심플했어요.
react-opencv는 OpenCvProvider라는 컴포넌트로 감싸져 있어,
그 안에서 js 라이브러리를 손쉽게 사용할 수 있게 해줍니다.
cdn의 주소가 명확하게 보이지 않을 수 있어, 여기에 기록해 둡니다.
https://docs.opencv.org/master/opencv.js
최종테스트입니다
아래는 계산기 화면입니다.
최초의 테스트에서는 삼성카드와 현대카드의 거래내역을 사용해 이미지 인식 테스트를 진행했습니다. 이번에는 신한카드의 거래내역으로 테스트를 해보려고 합니다. 이는 원래 학습에 사용하던 데이터를 바탕으로 새로운 데이터에도 적용이 가능한지를 검증하는 과정입니다.
아래와같이 모두 읽어오지못합니다.
이유는 단순합나다.
형식이 맞지 않기때문입니다.
정규식을 통한 인식의 한계이죠
상단에 일시불합계, 가격은 형식에 안맞습니다.
아래처럼 크롭해줍니다.
정상적으로 동작한다.
이상 배포 완료하고 끝을 냅니다.
tessract.js 의 성능이생각보다 매우 좋지 않은점
네이버나 구글의 비전api 를 이용하면 전혀 다른 결과가 나온다고 합니다.
모든 카드사의 거래내역에 적용될 것 같지는 않지만
여러분들도 테스트해 보는 것이?
netlify app 임시 앱 주소
(이후 도메인 붙일예정)
http://bit.ly/3FBwdI9