본문 바로가기

전체 글

(51)
[React] html2canvas 라이브러리 사용해 컴포넌트를 이미지로 캡쳐 컴포넌트를 이미지로 저장해야하는 기술이 필요했는데 찾아보니 여러가지가 나왔다. 그 중 검색결과가 제일 많았던 html2canvas 라이브러리를 사용하기로 했다. 1. background-image const handleDownloadImage = async () => { const element = printRef.current; const canvas = await html2canvas(element); const data = canvas.toDataURL("image/png"); const link = document.createElement("a"); link.href = data; link.download = "image.png"; document.body.appendChild(link); lin..
[RN] Google Vision API OCR 이미지에서 텍스트 추출 독서기록앱을 만드는 중에 마음에 드는 책 구절을 카메라로 찍어서 기록하는 부분을 구현해야 했다. 처음에는 그냥 텍스트로 기록하기, 이미지 불러오기, 카메라로 찍기. 이렇게 세가지만 넣으려고 했는데 좀 더 많은 기능을 넣어보고싶다는 욕심이 생겨서 이미지에서 텍스트를 추출하는 API를 사용해보기로 했다. https://cloud.google.com/vision/docs/ocr 이미지의 텍스트 감지 | Cloud Vision API | Google Cloud 의견 보내기 이미지의 텍스트 감지 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 API를 모바일 앱에서 사용하는 경우 Firebase 머신러닝 및 ML Kit를 사용해 cloud.google.com 구글에서 제공하는 A..
[RN] React Navigation Bottom Tabs 키보드 문제 React Navigation의 Bottom Tabs 로 하단탭을 만들었다. 그 중 두번째 탭을 누르면 검색페이지로 들어가는데, 거기서 검색바를 눌러 키보드가 열리면 하단탭이 키보드 위로 끌어올려지는 문제가 생겼다. 이렇게 input을 누르면 키보드가 열리면서 하단 탭이 키보드 위로 나타난다. iOS에서는 일어나지않는 문제인데, 안드로이드에서만 이런 문제가 일어났다. 검색해보니 안드로이드에서 키보드가 열리기 전 이벤트를 수행할 리스너가 없기 때문에 키보드가 열릴 때 Tab을 숨기겠다 같은 이벤트는 사용할 수 없는 것 같았다. 여러 많은 솔루션들이 있었지만 거의 해결되지 않았고 TabBar의 속성 중에서 키보드를 숨기는 속성이 있어서 한번 적용해 보았는데이게 참 애매했다...... screenOptions..