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

fix photo resolution

Browse Source
This commit is contained in:
MarcZierle 2022-01-21 13:03:38 +01:00
parent 3eaafa1933
commit e01c961dc3
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/CameraCapture.vue
View File

@ -15,8 +15,8 @@
</div> </div>
<n-spin :show="isCameraLoading || isPhotoTaken" v-show="selected_group"> <n-spin :show="isCameraLoading || isPhotoTaken" v-show="selected_group">
<div id="camera_preview"> <div id="camera_preview">
<video v-show="!isPhotoTaken" ref="camera" autoplay></video> <video ref="camera" autoplay></video>
<canvas v-show="isPhotoTaken" id="photoTaken" ref="canvas" width="100" height="100"></canvas> <canvas v-show="false" id="photoTaken" ref="canvas" width="100" height="100"></canvas>
</div> </div>
</n-spin> </n-spin>
</div> </div>
@ -119,6 +119,10 @@ export default {
height: 0, height: 0,
src: null src: null
}, },
stream: {
width: 0,
height: 0,
},
showPhotoTakenModal: false, showPhotoTakenModal: false,
} }
@ -181,7 +185,9 @@ export default {
const constraints = (window.constraints = { const constraints = (window.constraints = {
audio: false, audio: false,
video: { video: {
facingMode: 'environment' facingMode: 'environment',
width: { ideal: 4096 },
height: { ideal: 2160 },
} }
}) })
@ -190,6 +196,10 @@ export default {
this.$refs.camera.srcObject = stream this.$refs.camera.srcObject = stream
this.isCameraCreated = true 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.width = document.getElementById('camera_preview').offsetWidth
this.$refs.camera.width = this.photo.width this.$refs.camera.width = this.photo.width
@ -203,15 +213,15 @@ export default {
this.photo.height = document.getElementById('camera_preview').offsetHeight this.photo.height = document.getElementById('camera_preview').offsetHeight
this.$refs.canvas.width = this.photo.width this.$refs.canvas.width = this.stream.width
this.$refs.canvas.height = this.photo.height this.$refs.canvas.height = this.stream.height
const context = this.$refs.canvas.getContext('2d') const context = this.$refs.canvas.getContext('2d')
context.drawImage( context.drawImage(
this.$refs.camera, this.$refs.camera,
0, 0, 0, 0,
this.photo.width, this.stream.width,
this.photo.height) this.stream.height)
this.photo.src = this.$refs.canvas.toDataURL('image/png')//.replace('image/png', 'image/octet-stream') this.photo.src = this.$refs.canvas.toDataURL('image/png')//.replace('image/png', 'image/octet-stream')
@ -232,7 +242,7 @@ export default {
} }
const file = dataURLtoFile(this.photo.src, 'upload.png') const file = dataURLtoFile(this.photo.src, 'upload.png')
addNewPhoto(file, null, this.selected_group).then(() => { addNewPhoto(file, null, this.selected_group).then(() => {
this.message.success('Done!') this.message.success('Done!')
this.isPhotoTaken = false this.isPhotoTaken = false