mirror of
https://github.com/MarcZierle/photo-log-frontend.git
synced 2025-04-07 13:04:37 +00:00
change how camera photos are taken
This commit is contained in:
MarcZierle
parent
d3e44220c7
commit
fde8608dc4
@ -14,23 +14,29 @@
|
||||
<h1 class="text-3xl font-bold">Please select a photo group</h1>
|
||||
<p class="text-xl font-bold">(or create a new one)</p>
|
||||
</div>
|
||||
<n-spin :show="isCameraLoading || isPhotoTaken" v-show="selected_group">
|
||||
<div id="camera_preview">
|
||||
<video ref="camera" autoplay></video>
|
||||
<canvas v-show="false" id="photoTaken" ref="canvas" width="100" height="100"></canvas>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold" style="margin-top: 40%; text-align: center" v-if="selected_group && !photo_src">Please take a new photo</h1>
|
||||
<n-spin :show="isUploading">
|
||||
<n-image :src="photo_src" v-if="selected_group && photo_src" />
|
||||
</n-spin>
|
||||
</div>
|
||||
|
||||
<div id="take_photo">
|
||||
<n-space justify-content="center">
|
||||
<n-button
|
||||
type="primary" round size="large"
|
||||
:disabled="!selected_group || isPhotoTaken || !isCameraCreated"
|
||||
@click="takePhoto"
|
||||
>
|
||||
Take Photo
|
||||
</n-button>
|
||||
<label for="camera_file_input">
|
||||
<span :class="{disabled: !selected_group, camera_btn: true}">Take new photo</span>
|
||||
<input
|
||||
type="file"
|
||||
id="camera_file_input"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="previewImage"
|
||||
:disabled="!selected_group"
|
||||
/>
|
||||
</label>
|
||||
<n-button v-if="selected_group && photo_src"
|
||||
type="info" size="large" round
|
||||
@click="uploadPhoto"
|
||||
>Upload</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,30 +59,6 @@
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showPhotoTakenModal"
|
||||
:mask-closable="false"
|
||||
transform-origin="center"
|
||||
preset="card"
|
||||
:title="'Upload Photo to '+selected_group_label"
|
||||
:bordered="false"
|
||||
size="huge">
|
||||
|
||||
<n-space justify-content="center">
|
||||
<n-image
|
||||
:src="photo.src"
|
||||
:width="photo.width*0.75"
|
||||
/>
|
||||
</n-space>
|
||||
|
||||
<template #footer>
|
||||
<n-space justify-content="end">
|
||||
<n-button size="large" @click="showPhotoTakenModal = false; isPhotoTaken = false">Back</n-button>
|
||||
<n-button type="primary" size="large" @click="uploadPhoto" :loading="isUploading">Upload</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
@ -108,24 +90,14 @@ export default {
|
||||
|
||||
groups: [],
|
||||
selected_group: null,
|
||||
|
||||
showAddGroupModal: false,
|
||||
|
||||
new_group_name: '',
|
||||
|
||||
isCameraCreated: false,
|
||||
isCameraLoading: true,
|
||||
isPhotoTaken: false,
|
||||
photo: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
src: null
|
||||
},
|
||||
stream: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
photo_src: '',
|
||||
photo_file: null,
|
||||
|
||||
showPhotoTakenModal: false,
|
||||
isUploading: false,
|
||||
}
|
||||
},
|
||||
@ -135,13 +107,6 @@ export default {
|
||||
mounted() {
|
||||
window.scrollTo(0, 1)
|
||||
},
|
||||
watch: {
|
||||
selected_group: function () {
|
||||
if (this.isCameraCreated)
|
||||
return
|
||||
this.startCamera()
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selected_group_label() {
|
||||
if (this.selected_group !== null && this.groups.length > 0) {
|
||||
@ -203,83 +168,20 @@ export default {
|
||||
this.new_group_name = ''
|
||||
})
|
||||
},
|
||||
startCamera() {
|
||||
this.isCameraLoading = true
|
||||
|
||||
const constraints = (window.constraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: 'environment',
|
||||
width: { ideal: 4096 },
|
||||
height: { ideal: 2160 },
|
||||
}
|
||||
})
|
||||
|
||||
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
|
||||
this.isCameraLoading = false
|
||||
this.$refs.camera.srcObject = stream
|
||||
this.isCameraCreated = true
|
||||
|
||||
let stream_settings = stream.getVideoTracks()[0].getSettings()
|
||||
this.stream.width = stream_settings.width
|
||||
this.stream.height = stream_settings.height
|
||||
|
||||
this.photo.width = document.getElementById('camera_preview').offsetWidth
|
||||
this.photo.height = document.getElementById('camera_preview').offsetHeight
|
||||
|
||||
if (this.stream.width > this.stream.height) {
|
||||
this.$refs.camera.width = this.photo.width
|
||||
} else {
|
||||
let ratio = this.photo.height / this.stream.height
|
||||
this.$refs.camera.width = this.stream.width * ratio
|
||||
}
|
||||
}).catch(error => {
|
||||
this.message.error('Cannot load device camera! '+error)
|
||||
})
|
||||
},
|
||||
takePhoto() {
|
||||
this.isPhotoTaken = true
|
||||
|
||||
setTimeout(() => {
|
||||
this.photo.height = document.getElementById('camera_preview').offsetHeight
|
||||
|
||||
this.$refs.canvas.width = this.stream.width
|
||||
this.$refs.canvas.height = this.stream.height
|
||||
|
||||
const context = this.$refs.canvas.getContext('2d')
|
||||
context.drawImage(
|
||||
this.$refs.camera,
|
||||
0, 0,
|
||||
this.stream.width,
|
||||
this.stream.height)
|
||||
|
||||
this.photo.src = this.$refs.canvas.toDataURL('image/png')//.replace('image/png', 'image/octet-stream')
|
||||
|
||||
this.showPhotoTakenModal = true
|
||||
}, 50)
|
||||
previewImage(event) {
|
||||
let files = event.target.files
|
||||
this.photo_file = files[0]
|
||||
this.photo_src = window.URL.createObjectURL(this.photo_file)
|
||||
},
|
||||
uploadPhoto() {
|
||||
this.isUploading = true
|
||||
const dataURLtoFile = (dataurl, filename) => {
|
||||
const arr = dataurl.split(',')
|
||||
const mime = arr[0].match(/:(.*?);/)[1]
|
||||
const bstr = atob(arr[1])
|
||||
let n = bstr.length
|
||||
const u8arr = new Uint8Array(n)
|
||||
while (n) {
|
||||
u8arr[n - 1] = bstr.charCodeAt(n - 1)
|
||||
n -= 1 // to make eslint happy
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime })
|
||||
}
|
||||
|
||||
const file = dataURLtoFile(this.photo.src, 'upload.png')
|
||||
|
||||
addNewPhoto(file, null, this.selected_group).then((response) => {
|
||||
addNewPhoto(this.photo_file, null, this.selected_group).then((response) => {
|
||||
this.message.success('Done!')
|
||||
this.isPhotoTaken = false
|
||||
this.showPhotoTakenModal = false
|
||||
|
||||
this.isUploading = false
|
||||
this.photo_src = ''
|
||||
this.photo_file = null
|
||||
|
||||
setTimeout(() => {
|
||||
cropPhoto(response.data.id, 'auto').then(()=>{
|
||||
@ -304,10 +206,6 @@ html, body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#all {
|
||||
background-color: #111;
|
||||
width: 100vw;
|
||||
@ -342,6 +240,10 @@ html, body {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#camera_file_input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#take_photo {
|
||||
height: 15vh;
|
||||
background-color: #222;
|
||||
@ -352,7 +254,27 @@ html, body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#take_photo .camera_btn {
|
||||
margin-top: 5vh;
|
||||
display: inline-block;
|
||||
background-color: #7ec090;
|
||||
color: white;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 2em;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#take_photo .n-button {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.camera_btn:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
filter: brightness(0.75) !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user