From 764c4ae94d1d538372abc971685625cbfebd3446 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 13 Sep 2018 23:46:23 +0800
Subject: [PATCH] Fix previewing high-res texture on upload page

---
 .../assets/src/components/skinlib/Upload.vue   |  7 ++++++-
 .../tests/components/skinlib/Upload.test.js    | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/resources/assets/src/components/skinlib/Upload.vue b/resources/assets/src/components/skinlib/Upload.vue
index 5b1d309a..dda7d2ba 100644
--- a/resources/assets/src/components/skinlib/Upload.vue
+++ b/resources/assets/src/components/skinlib/Upload.vue
@@ -48,7 +48,7 @@
                         <div class="form-group">
                             <label for="file" v-t="'skinlib.upload.select-file'"></label>
                             <div class="file-dnd">
-                                <img v-if="hasFile" :src="texture">
+                                <img v-if="hasFile" :src="texture" :width="width2d" />
                                 <h3 v-else v-t="'skinlib.upload.dropZone'"></h3>
                             </div>
                             <file-upload
@@ -132,6 +132,7 @@ export default {
             privacyNotice: blessing.extra.privacyNotice,
             scorePublic: blessing.extra.scorePublic,
             scorePrivate: blessing.extra.scorePrivate,
+            width2d: 64,
         };
     },
     computed: {
@@ -187,6 +188,10 @@ export default {
                 this.name = matched ? matched[1] : file.name;
             }
             this.texture = URL.createObjectURL(file.file);
+
+            const image = new Image();
+            image.src = this.texture;
+            image.onload = () => this.width2d = image.width > 400 ? 400 : image.width;
         },
         remove() {
             this.$refs.upload.clear();
diff --git a/resources/assets/tests/components/skinlib/Upload.test.js b/resources/assets/tests/components/skinlib/Upload.test.js
index 6b5f2c42..ac6aba0a 100644
--- a/resources/assets/tests/components/skinlib/Upload.test.js
+++ b/resources/assets/tests/components/skinlib/Upload.test.js
@@ -71,6 +71,22 @@ test('display score cost', () => {
 
 test('process input file', () => {
     window.URL.createObjectURL = jest.fn().mockReturnValue('file-url');
+    jest.spyOn(window, 'Image')
+        .mockImplementationOnce(function () {
+            this.src = '';
+            this.onload = null;
+            Object.defineProperty(this, 'onload', {
+                set: fn => fn()
+            });
+        })
+        .mockImplementationOnce(function () {
+            this.src = '';
+            this.width = 500;
+            this.onload = null;
+            Object.defineProperty(this, 'onload', {
+                set: fn => fn()
+            });
+        });
     const blob = new Blob;
     const wrapper = mount(Upload, {
         stubs: ['file-upload']
@@ -90,6 +106,8 @@ test('process input file', () => {
     expect(wrapper.vm.name).toBe('789');
 
     expect(wrapper.vm.texture).toBe('file-url');
+
+    window.Image.mockRestore();
 });
 
 test('upload file', async () => {