하이브리드 앱 카메라 연동

Vue.js를 사용한다고 가정하고, 카메라 앱을 열어 사진을 찍고 결과를 가져오는 예제를 제공합니다. 아래 코드를 참고해주세요. 아래 코드에서 ' openCamera ' 함수는 ' button ' 클릭 시 호출되며, 동적으로 ' <input type="file" /> ' 요소를 생성하고 카메라를 연동합니다. 사진이 선택되면 FileReader를 사용하여 Base64 형식의 이미지로 변환한 다음, 이미지 URL을 ' imageSrc '에 저장합니다. ' imageSrc ' 값이 변경되면 이미지가 화면에 표시됩니다.

1<template>
2  <div>
3    <button @click="openCamera">사진 촬영</button>
4    <img v-if="imageSrc" :src="imageSrc" alt="Captured Image" />
5  </div>
6</template>
7
8<script setup lang="ts">
9import { ref } from 'vue'
10
11const imageSrc = ref(null)
12
13const openCamera = () => {
14  const input = document.createElement('input')
15  input.type = 'file'
16  input.accept = 'image/*'
17  input.capture = 'camera'
18
19  input.addEventListener('change', (event) => {
20    if (event.target.files && event.target.files.length > 0) {
21      const file = event.target.files[0]
22      const reader = new FileReader()
23
24      reader.onload = (e) => {
25        imageSrc.value = e.target.result
26      }
27
28      reader.readAsDataURL(file)
29    }
30  })
31
32  input.click()
33}
34</script>