カメラ機能

<template>
  <div class="root">
    <div>
      <div class="button1" @click="pickImagesOrSelect()">
        写真選択 or 写真撮影
      </div>
      <div class="resetButton" @click="captures = []">リセット</div>

      <div class="captureWrap">
        <div class="capture" v-for="c in captures" v-bind:key="c.d">
          <img v-bind:src="c" />
        </div>
        <p>{{ dataUrlString }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Camera, CameraResultType, CameraSource } from "@capacitor/camera";

export default defineComponent({
  setup() {
    const video = ref();
    const canvas = ref();
    const captures = ref([]) as any;
    const dataUrlString = ref();

    const pickImagesOrSelect = async () => {
      const image = await Camera.getPhoto({
        quality: 60, // 0~100まで
        source: CameraSource.Prompt, // 写真を撮るorライブラリから選択or両方
        resultType: CameraResultType.DataUrl, // 実行後のデータの種類を指定
        presentationStyle: "popover", // 画像の表示
        webUseInput: true, // ブラウザで実行した時の処理
        promptLabelHeader: "写真を選択", // 以下の文言のタイトル的なもの
        promptLabelPicture: "写真を撮る", // 写真を撮るときに表示される文言
        promptLabelPhoto: "アルバルから選択", // ライブラリにアクセスする時に表示される文言
        promptLabelCancel: "キャンセル", // 実行を取りやめる時の文言
        correctOrientation: true,
      });
      dataUrlString.value = image.dataUrl;
      captures.value.push(image.dataUrl);
    };

    return {
      video,
      canvas,
      captures,
      pickImagesOrSelect,
      dataUrlString,
    };
  },
});
</script>

<style lang="scss" scoped>
.root {
  margin: 0 auto;
  width: 390px;
  position: relative;
  padding: 16px;
}

.photo {
  width: 390px;
  height: 390px;
  margin-bottom: 24px;
}
.l2 {
  top: 0;
  position: absolute;
}
#camera_record_box {
  position: absolute;
  width: 390px;
  height: 390px;
  background-image: url("../square-1.png");
  opacity: 0.5;
}
#canvas {
  display: none;
}

.captureWrap {
  width: 100%;
  display: flex;

  flex-flow: column;
  gap: 12px;

  .capture {
    img {
      width: 100%;
    }
  }
}

.button1 {
  background-color: #005bac;
  color: #fff;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 32px;
  cursor: pointer;
  font-weight: bold;
}

.resetButton {
  color: #1a1c21;
  background-color: #ffcc00;
  font-weight: bold;

  padding: 16px;
  margin-bottom: 12px;
  border-radius: 32px;
  cursor: pointer;
}
</style>