ZierleTraining/frontend-web
1
0
Fork 0
mirror of https://github.com/MarcZierle/photo-log-frontend.git synced 2025-04-07 13:04:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix camera size in capture

Browse Source
This commit is contained in:
MarcZierle 2022-01-25 14:46:49 +01:00
parent 5401406ca4
commit d423a7f70d
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/CameraCapture.vue
View File

@ -227,8 +227,12 @@ export default {
this.photo.width = document.getElementById('camera_preview').offsetWidth
this.photo.height = document.getElementById('camera_preview').offsetHeight
this.$refs.camera.width = this.stream.width
this.$refs.camera.height = this.stream.height
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)
})
@ -319,6 +323,7 @@ html, body {
#camera_preview {
height: 75vh;
width: 100%;
}
#group_select {
@ -330,7 +335,7 @@ html, body {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 30%;
margin-top: 25vh;
}
#prompt_select .n-icon {
@ -343,11 +348,11 @@ html, body {
display: flex;
justify-content: center;
bottom: 0;
position: absolute;
position: fixed;
width: 100%;
}
#take_photo .n-button {
margin-top: 30%;
margin-top: 5vh;
}
</style>