하이브리드 앱 카메라 연동

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div>
    <button @click="openCamera">사진 촬영</button>
    <img v-if="imageSrc" :src="imageSrc" alt="Captured Image" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const imageSrc = ref(null)

const openCamera = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.capture = 'camera'

  input.addEventListener('change', (event) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        imageSrc.value = e.target.result
      }

      reader.readAsDataURL(file)
    }
  })

  input.click()
}
</script>