ZierleTraining/frontend-web
1
0
Fork 0
mirror of https://github.com/MarcZierle/photo-log-frontend.git synced 2025-04-09 22:04:38 +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.width = document.getElementById('camera_preview').offsetWidth
this.photo.height = document.getElementById('camera_preview').offsetHeight this.photo.height = document.getElementById('camera_preview').offsetHeight
this.$refs.camera.width = this.stream.width if (this.stream.width > this.stream.height) {
this.$refs.camera.height = 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 => { }).catch(error => {
this.message.error('Cannot load device camera! '+error) this.message.error('Cannot load device camera! '+error)
}) })
@ -319,6 +323,7 @@ html, body {
#camera_preview { #camera_preview {
height: 75vh; height: 75vh;
width: 100%;
} }
#group_select { #group_select {
@ -330,7 +335,7 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
margin-top: 30%; margin-top: 25vh;
} }
#prompt_select .n-icon { #prompt_select .n-icon {
@ -343,11 +348,11 @@ html, body {
display: flex; display: flex;
justify-content: center; justify-content: center;
bottom: 0; bottom: 0;
position: absolute; position: fixed;
width: 100%; width: 100%;
} }
#take_photo .n-button { #take_photo .n-button {
margin-top: 30%; margin-top: 5vh;
} }
</style> </style>