재우니의 블로그

사용자 이미지 업로드(JavaScript) -> Google Cloud Vision API 로 이미지 분석

프로그래밍/자바스크립트
2024. 11. 20. 02:50


이 예제는 HTML과 JavaScript를 이용하여 사용자가 이미지를 업로드하고 Google Cloud Vision API로 이미지를 분석하는 간단한 웹 애플리케이션을 구현합니다.

 

1. 프로젝트 폴더 생성 및 파일 준비

먼저, 프로젝트를 생성하고 필요한 파일들을 준비합니다.

  1. 프로젝트 폴더 생성: 프로젝트를 위한 폴더를 생성하세요. 예를 들어, image-analysis-app이라는 이름으로 폴더를 만드세요.
  2. 파일 생성: 다음의 두 파일을 생성합니다.
    • index.html: HTML 파일로 사용자 인터페이스를 정의합니다.
    • script.js: JavaScript 파일로 이미지 업로드 및 API 호출 로직을 작성합니다.

2. HTML 파일 작성 (index.html)

아래와 같이 index.html 파일을 작성하세요. 이 파일은 이미지 업로드와 분석 버튼을 포함하고 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload and Analysis</title>
</head>
<body>
    <h1>Upload an Image for Analysis</h1>
    <input type="file" id="imageInput" accept="image/*">
    <button onclick="uploadAndAnalyzeImage()">Upload and Analyze</button>
    <pre id="result"></pre>
    <script src="script.js"></script>
</body>
</html>
  • 설명: 이 HTML 파일은 이미지 파일을 선택할 수 있는 입력 요소와 버튼을 포함합니다. 버튼을 클릭하면 script.js 파일에 정의된 uploadAndAnalyzeImage() 함수가 실행됩니다.

3. JavaScript 파일 작성 (script.js)

이제 script.js 파일을 작성합니다. 이 파일은 사용자가 이미지를 업로드하고 Google Cloud Vision API를 호출하여 결과를 화면에 표시하는 역할을 합니다.

async function uploadAndAnalyzeImage() {
    const input = document.getElementById('imageInput');
    if (input.files && input.files[0]) {
        const file = input.files[0];
        const reader = new FileReader();
        reader.onloadend = async () => {
            const base64Image = reader.result.split(',')[1];
            const result = await analyzeImage(base64Image);
            document.getElementById('result').innerText = JSON.stringify(result, null, 2);
        };
        reader.readAsDataURL(file);
    } else {
        alert('Please select an image file.');
    }
}

async function analyzeImage(base64Image) {
    const apiKey = 'YOUR_GOOGLE_CLOUD_VISION_API_KEY';
    const url = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
    const requestBody = {
        requests: [
            {
                image: {
                    content: base64Image
                },
                features: [
                    {
                        type: 'LABEL_DETECTION',
                        maxResults: 10
                    }
                ]
            }
        ]
    };

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    });

    const result = await response.json();
    return result;
}
  • 설명:
    • uploadAndAnalyzeImage(): 사용자가 이미지를 업로드하면 이를 base64로 인코딩하여 Google Cloud Vision API로 분석 요청을 보냅니다.
    • analyzeImage(base64Image): Google Cloud Vision API에 이미지를 전송하고 분석 결과를 반환합니다. 이때 API 키(YOUR_GOOGLE_CLOUD_VISION_API_KEY)를 사용합니다.

4. Google Cloud Vision API 설정

이제 Google Cloud Vision API를 사용할 수 있도록 설정합니다.

  1. Google Cloud Platform (GCP) 프로젝트 생성:
  2. Vision API 활성화:
    • 생성한 프로젝트에서 "API 및 서비스" 메뉴로 이동하여 "라이브러리"를 선택한 후 "Vision API"를 검색하여 활성화합니다.
  3. API 키 생성:
    • "API 및 서비스" > "인증 정보"로 이동하여 "인증 정보 만들기"를 클릭하고 "API 키"를 생성하세요.
    • 생성된 API 키를 복사하여 script.js 파일의 YOUR_GOOGLE_CLOUD_VISION_API_KEY 부분에 붙여넣습니다.

5. 실행 방법

  1. 로컬 서버 실행: HTML 파일은 브라우저에서 직접 열 수도 있지만, 로컬 서버에서 실행하는 것이 더 좋습니다. 이를 위해 간단한 HTTP 서버를 사용할 수 있습니다.
    • Python을 사용하는 경우: Python이 설치되어 있다면 터미널에서 아래 명령어를 입력하여 로컬 서버를 실행할 수 있습니다. 
      # Python 3인 경우
python -m http.server
    • VS Code와 같은 IDE를 사용하는 경우: Live Server 플러그인을 설치하여 실행할 수도 있습니다.
  2. 브라우저에서 접속: 로컬 서버가 실행되면 브라우저에서 http://localhost:8000 (또는 Python 버전에 따라 다를 수 있음)으로 접속하여 파일을 테스트합니다.
  3. 이미지 업로드 및 분석: 페이지에서 이미지를 업로드하고 "Upload and Analyze" 버튼을 클릭하여 Google Cloud Vision API를 통해 이미지가 분석되는 것을 확인하세요.

6. 주의 사항

  • API 사용량 제한: Google Cloud Vision API는 무료로 일정량 사용이 가능하지만, 사용량이 많아지면 요금이 부과될 수 있으니 주의하세요.
  • 보안: 실제 배포 시에는 API 키를 노출하지 않도록 백엔드 서버에서 API 호출을 처리하거나 환경 변수를 사용하는 것이 좋습니다.

 

 

이렇게 하면 이미지를 업로드하고 Google Cloud Vision API로 분석하는 간단한 웹 애플리케이션을 완성할 수 있습니다.

 

 

이 코드를 실행하면 Google Cloud Vision API의 **LABEL_DETECTION** 기능을 사용하여 이미지의 내용을 분석하고 그 결과를 반환합니다. `result` 변수에는 이미지의 분석 결과가 JSON 형태로 저장되며, `document.getElementById('result').innerText`를 통해 화면에 출력됩니다.

 


📌 예상되는 결과 (`result` 값)


`result`는 이미지에서 감지된 객체 또는 특징에 대한 레이블 정보가 포함된 JSON 객체입니다. 예를 들어, 강아지 사진을 업로드하면 다음과 같은 분석 결과가 나올 수 있습니다: 

{
  "responses": [
    {
      "labelAnnotations": [
        {
          "description": "dog",
          "score": 0.98
        },
        {
          "description": "pet",
          "score": 0.95
        },
        {
          "description": "animal",
          "score": 0.93
        }
      ]
    }
  ]
}

 

 

### 주요 항목 설명

- **responses**: 분석 결과에 대한 응답 배열입니다.
- **labelAnnotations**: 이미지에서 감지된 레이블 목록입니다. 각 항목은 이미지에서 인식된 객체 또는 특징을 나타냅니다.
  - **description**: 인식된 객체의 이름입니다 (예: "dog", "animal").
  - **score**: 해당 객체가 해당 이미지에 존재할 가능성을 나타내는 신뢰도 점수입니다. 값은 0에서 1 사이의 실수로, 값이 클수록 신뢰도가 높습니다.

예를 들어 사용자가 고양이 사진을 업로드했다면 `labelAnnotations` 배열에는 `cat`, `pet`, `animal` 등과 같은 레이블이 포함될 수 있습니다. 이러한 분석 결과는 JSON 형식으로 `result` 영역에 출력됩니다.

이 결과는 Google Cloud Vision API가 이미지의 내용을 분석하여 반환하는 것으로, 사용자가 이미지에 어떤 객체가 있는지 쉽게 확인할 수 있게 도와줍니다.

 

 

 

저작자표시 비영리 동일조건

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

JavaScript : 부동소수점 연산 오차 문제와 해결 방법  (1) 2025.03.07
JavaScript : Hoisting(호이스팅) 최상단으로 끌어올려지는 현상 알아보자  (0) 2025.03.05
JS : 오늘, 내일 날씨 및 온도 구현하기 (openweathermap 활용)  (1) 2024.10.31
Javascript : Promise 객체 : 최신 개념과 실전 활용법  (0) 2024.10.22
Cross-site scripting (XSS) cheat sheet  (0) 2024.05.08
재우니의 블로그프로그램 언어 및 데이터베이스 또는 생활정보까지 다양한 정보 제공 합니다.

티스토리툴바

Buy Me A Coffee