본문 바로가기

분류 전체보기82

6. Google Vision API Google Vision API를 이용해서 이미지의 텍스트를 인식 -Google Vision API : 구글에서 제공해주는 머신러닝 기반의 이미지 분석 API Google Cloud Vision 라이브러리 설치 npm install google-cloud-vision config - : 이미지 인식 기능 -ImageAnnotatorClient : Google Vision API와 통신하는 객체 -textDetection: 텍스트를 인식 -fullTextAnnotation: 텍스트 인식이 성공적으로 완료 const vision = require("@google-cloud/vision"); //Google Cloud Vision 라이브러리 등록 const CREDENTIALS = {'사용자 계정 비공개 키 .. 2024. 4. 14.
5. 선 한 획 씩 삭제하기 ※returnCurrentLine 함수 추가 - 가장 최근에 쓴 선 삭제 ※redrawCanvas 함수 추가 - 선 하나 삭제 시 paths 배열에 저장된 선들을 다시 그려서 캔버스에 복구 ※path / setPath 추가 - 현재 그리는 선의 좌표들을 저장하는 배열의 변수 / 함수 ※paths / setPaths 추가 - path들의 집합을 저장하는 배열의 변수 / 함수 ※css 파일 다시 추가 가장 최근에 쓴 선을 삭제하는 기능 -forEach() : 배열을 순회해서 처리하는 데 사용되는 메서드로, 배열의 각 요소에 대해 주어진 함수를 순서대로 한 번씩 실행, map() 함수와 비슷한 기능을 가짐 page - import React, { useEffect, useRef, useState } from .. 2024. 4. 11.
4. Canvas 다시 쓰기 ※clearCanvas 함수 추가 - 캔버스 초기화 캔버스 화면을 모두 지우고 추출한 캔버스 이미지도 삭제 -ctx.clearRect(x, y, w, h) : 캔버스 영역을 초기화 page - import React, { useEffect, useRef, useState } from "react"; function Canvas() { const canvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [lastX, setLastX] = useState(0); const [lastY, setLastY] = useState(0); const [outputImageSrc, setOutputImageSrc] = useSt.. 2024. 4. 11.
3. Canvas 이미지 추출 ※outputCanvasImage 함수 추가 - 캔버스 이미지 추출 ※outputImageSrc / setOutputImageSrc 추가 - 이미지 src 변수 / 함수 캔버스로 그린 그림을 이미지로 추출 (outputCanvas 함수) -toDataURL() : 캔버스에 그린 그림을 문자열 형태로 변환. page - import React, { useEffect, useRef, useState } from "react"; function Canvas() { const canvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [lastX, setLastX] = useState(0); const [lastY, set.. 2024. 4. 11.

티스토리툴바