Resizes images when viewing attachments

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>

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()
 		}
 	}
 }