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

add photo rotate

Browse Source
This commit is contained in:
MarcZierle 2022-05-03 18:39:10 +02:00
parent 25f062f82a
commit 2add4c42a2
3 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/PhotoCropper.vue
View File

@ -10,17 +10,23 @@
ref="cropper"
/>
<n-space vertical justify="space-between">
<n-space vertical justify="space-between" class="options_panel">
<div>
<h2>Preview</h2>
<n-image
class="preview"
height="200"
:src="preview_data_url"
/>
<div class="preview_wrapper">
<n-image
class="preview"
:src="preview_data_url"
/>
</div>
</div>
<n-checkbox v-model:checked="lock_aspect_ratio">lock aspect ratio to flip chart size?</n-checkbox>
<h2 style="margin-top: 3em;">Options</h2>
rotate by {{ rotate_angle }}°
<n-slider v-model:value="rotate_angle" @update:value="update_rotate" :step="1" :min="-180" :max="180" />
<n-checkbox :disabled="free_transform" v-model:checked="lock_aspect_ratio">lock aspect ratio to flip chart size</n-checkbox>
<n-checkbox v-model:checked="free_transform">free transform handles</n-checkbox>
</n-space>
</n-space>
</div>
@ -45,7 +51,9 @@ export default {
return {
preview_data_url: null,
lock_aspect_ratio: true,
bbox: []
free_transform: false,
bbox: [],
rotate_angle: 0,
}
},
computed: {
@ -83,21 +91,52 @@ export default {
this.preview_data_url = canvas.toDataURL()
this.bbox = this.coordinates_to_bbox(coordinates)
},
update_rotate() {
this.$refs.cropper.appliedImageTransforms= {
rotate: this.rotate_angle,
flip: {
horizontal: false,
vertical: false,
},
}
},
getResult() {
return JSON.parse(JSON.stringify(this.bbox))
return {
bbox: JSON.parse(JSON.stringify(this.bbox)),
rotate: -this.rotate_angle
}
}
}
}
</script>
<style scoped>
h2 {
font-weight: bold;
font-size: 1.2em;
color: #999;
}
.options_panel {
display: inline;
background-color: #f5f5f5;
padding: 1.5em;
border-radius: 1em;
}
.cropper {
height: 600px;
width: 600px;
max-width: 80vw;
background: #DDD;
}
.preview_wrapper {
width: 20vw;
height: 20vw;
}
.preview {
max-width: 300px;
object-fit: contain;
}
</style>

2
src/components/PhotoSelectModal.vue
View File

@ -31,7 +31,7 @@
<PhotoItem
v-for="photo in photos[group.id]"
:key="photo.id"
width="100"
width="150"
:src="photo.cropped_image !== null ? photo.cropped_image : photo.original_image"
:can_select="true"
:init_selection="is_photo_selected(photo.id)"

11
src/views/ManagePhotos.vue
View File

@ -36,13 +36,13 @@
:mask-closable="false"
>
<n-card
style="width: 95vw; height: 90vh;"
style="width: 95vw; min-height: 90vh;"
title="Adjust Photo Cropping"
:bordered="true"
>
<PhotoCropper
style="max-width:900px;margin:auto;"
style="max-width:75vw;margin:auto;"
:src="current_photo_src"
ref="cropper"
/>
@ -248,11 +248,14 @@ export default {
}
},
changeCrop() {
let bbox = this.$refs.cropper.getResult()
let results = this.$refs.cropper.getResult()
let bbox = results.bbox
let rotate = results.rotate
if (bbox && this.current_photo) {
this.$store.dispatch('updatePhoto', {
id: this.current_photo,
bbox_coords: bbox
bbox_coords: bbox,
rotate: rotate
}).then(()=>{
setTimeout(()=>{
this.$store.dispatch('cropPhoto', {