From 5f66e2fc4f6a22327d4da687fdc36d4009696416 Mon Sep 17 00:00:00 2001
From: hr20k_ <haruki.private@gmail.com>
Date: Sat, 23 Nov 2019 19:13:11 +0900
Subject: [PATCH] Update init image by croppa

---
 frontend/src/components/ItemDetailModal.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ItemDetailModal.vue b/frontend/src/components/ItemDetailModal.vue
index 7a9f700..3a42222 100644
--- a/frontend/src/components/ItemDetailModal.vue
+++ b/frontend/src/components/ItemDetailModal.vue
@@ -34,6 +34,7 @@
         :placeholder-font-size="10"
         :file-size-limit="4000 * 6000"
         accept=".jpg,.jpeg,.png"
+        @initial-image-loaded="imageLoaded"
         @file-size-exceed="$message.error('ファイルサイズが大きすぎます')"
       >
       </croppa>
@@ -128,9 +129,10 @@ export default {
         image.setAttribute('crossorigin', 'anonymous')
         image.src = item.url
         this.initialImage = image
-
-        image.onload = () => {
-          this.imageHeight = image.height / this.quality
+        try {
+          this.croppa.refresh()
+        } catch {
+          console.log('refresh error.')
         }
       }
       this.tags = item.tags.map(tag => tag.name)
@@ -143,6 +145,9 @@ export default {
     }
   },
   methods: {
+    imageLoaded () {
+      this.imageHeight = this.croppa.img.height / this.quality
+    },
     handleClose (tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
     },