<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,
source: CameraSource.Prompt,
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>