diff options
| author | Cyrille Bollu <cyrpub@bollu.be> | 2019-07-20 22:15:37 +0200 |
|---|---|---|
| committer | Cyrille Bollu <cyrpub@bollu.be> | 2019-07-20 22:15:37 +0200 |
| commit | 672a7f672fd31ff799b3a1e147c41660e4340ad2 (patch) | |
| tree | 149b3f45b1c34c73b8d6386467c5dbbd2721b848 | |
| parent | 5bcf85fbdeecc50064f56cbe531c42822c16ad6c (diff) | |
Resizes images when viewing attachments
Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>
| -rw-r--r-- | src/components/PostAttachment.vue | 31 |
1 files changed, 26 insertions, 5 deletions
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue index 6c8d69c3..04c575bd 100644 --- a/src/components/PostAttachment.vue +++ b/src/components/PostAttachment.vue @@ -4,10 +4,10 @@ <img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" @click="showModal(index)"> </div> <modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)" - size="large" @close="closeModal" @previous="showPrevious" + size="full" @close="closeModal" @previous="showPrevious" @next="showNext"> <div class="modal__content"> - <img ref="modalImg" src=""> + <canvas ref="modalCanvas"></canvas> </div> </modal> </masonry> @@ -36,9 +36,30 @@ export default { } }, methods: { + displayResizedImage() { + var canvas = this.$refs.modalCanvas + var ctx = canvas.getContext("2d") + var img = new Image() + img.onload = function() { + var width= img.width + var height = img.height + if ( width > window.innerWidth ) { + height = height * ( window.innerWidth / width ) + width = window.innerWidth + } + if ( height > window.innerHeight ) { + width = width * ( window.innerHeight / height ) + height = window.innerHeight + } + canvas.width = width + canvas.height = height + ctx.drawImage(img, 0, 0, width, height) + } + img.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id) + }, showModal(idx) { this.current = idx - this.$refs.modalImg.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id) + this.displayResizedImage() this.modal = true }, closeModal() { @@ -46,11 +67,11 @@ export default { }, showPrevious() { this.current-- - this.$refs.modalImg.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id) + this.displayResizedImage() }, showNext() { this.current++ - this.$refs.modalImg.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id) + this.displayResizedImage() } } } |