본문 바로가기

프로젝트/한글 게임20

8. multer multer를 이용해서 이미지 파일을 몽고db에 데이터로 저장 -multer: 이미지, 동영상 같은 여러 가지 파일들을 업로드할 때 사용하는 미들웨어 -캔버스 기능 코드를 낱말 맞추기 기능 코드와 같은 파일에 병합 config - : multer 미들웨어 지정 -diskStorage: 하드디스크에 업로드 파일을 저장 -destination: 저장할 경로 -filename: 저장할 파일명 -originalname: 원래 이름으로 지정 -storage: 저장할 공간에 대한 정보 설정 const multer = require("multer"); //multer 모듈을 불러옴 const storage = multer.diskStorage({ //파일 저장을 위한 설정을 정의 destination: (req, f.. 2024. 4. 15.
7. 이미지 텍스트 인식 1) 클라우드에서 캔버스로 이미지 생성2) 이미지를 서버로 보냄3) 서버에서 google vision api로 이미지 텍스트 인식4) 텍스트를 클라우드로 보냄 -백엔드- config - : 이미지 텍스트 인식 기능const vision = require("@google-cloud/vision");const CREDENTIALS = {'사용자 계정 비공개 키'};const CONFIG = { credentials: { private_key: CREDENTIALS.private_key, client_email: CREDENTIALS.client_email, },};const client = new vision.ImageAnnotatorClient(CONFIG.. 2024. 4. 14.
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.