분류 전체보기82 10. 이미지 데이터 가져오기 서버에서 이미지 데이터를 랜덤으로 가져와 낱말 게임 기능을 구현 -백엔드- controller - : 랜덤 이미지를 클라이언트로 보내기 -aggregate: 주어진 조건으로 데이터를 검색하는 쿼리 -$sample: 지정한 개수 만큼 랜덤으로 가져옴 (...) //Get random Image, /image const getImage = asynchHandler(async (req, res) => { const game = await Game.aggregate([{ $sample: { size: 1 } }]); //데이터 하나만 가져옴 res.status(200).send(game); }); (...) module.exports = { postCanvas, getImage, postImage }; rout.. 2024. 4. 18. 9. 이미지, 낱말 데이터 등록 프론트엔드에서 이미지와 낱말을 각각 입력, 등록해서 백엔드로 전송 page - Game - -accept="image/*" : 모든 확장자의 이미지 파일 허용 import React, { useState } from "react"; import axios from "axios"; function ImageRegist() { const [imageTitle, setImageTitle] = useState(""); //낱말 지정 const [imageFile, setImageFile] = useState(null); //이미지 파일 지정 const changeImageTitle = (e) => setImageTitle(e.target.value); const changeImageFile = (e) => se.. 2024. 4. 17. 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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 21 다음
