在新对话框中打开选择图片的大图

修复了Edge无法保存图片的问题
xfgryujk · Jul 22, 2018 · 6be7e78 · 6be7e78
1 parent b464ead
commit 6be7e78
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/src/gui/gui.vue b/src/gui/gui.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-tooltip class="item" content="发色图救救北极熊">
-      <a href="#" @click.prevent="openGui" style="position: fixed; left: 0; bottom: 0">
+      <a href="#" @click.prevent="openGui" class="gui-button">
         <img src="https://ww1.sinaimg.cn/mw690/be15a4ddjw8fbet7h4rpoj209z0c7q39.jpg" width="40px" height="49px">
       </a>
     </el-tooltip>
@@ -102,7 +102,13 @@ export default {
 </script>
 
 <style scoped>
+.gui-button {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+
 .child-mb * {
-  margin-bottom: 1em
+  margin-bottom: 1em;
 }
 </style>
diff --git a/src/gui/select-img.vue b/src/gui/select-img.vue
@@ -15,6 +15,12 @@
         </el-upload>
       </el-form-item>
     </el-form>
+
+    <el-dialog :title="largeImgTitle" :visible.sync="largeImgVisible" append-to-body>
+      <a href="#" @click.prevent="onClickLargeImg">
+        <img class="image" :src="largeImgUrl">
+      </a>
+    </el-dialog>
   </div>
 </template>
 
@@ -25,7 +31,11 @@ export default {
   data () {
     return {
       isEncryption: true,
-      fileList: []
+      fileList: [],
+      largeImgTitle: '',
+      largeImgVisible: false,
+      largeImgUrl: '',
+      largeImgUrlShort: ''
     }
   },
   methods: {
@@ -63,28 +73,41 @@ export default {
       this.fileList = fileList
     },
     onPreview (file) {
+      this.largeImgTitle = file.name
+      this.largeImgUrl = file.url
+      window.URL.revokeObjectURL(this.largeImgUrlShort)
+      this.largeImgUrlShort = ''
+      this.largeImgVisible = true
+    },
+    onClickLargeImg () {
       let url
-      if (file.url.startsWith('data:')) {
-        // file.url太长了，浏览器地址栏装不下
-        let [memePart, base64Str] = file.url.split(',')
+      if (this.largeImgUrlShort) {
+        url = this.largeImgUrlShort
+      } else if (this.largeImgUrl.startsWith('data:')) {
+        // Chrome和Edge无法打开data URL？
+        let [memePart, base64Str] = this.largeImgUrl.split(',')
         let meme = /:(.*?);/.exec(memePart)[1]
         let dataStr = atob(base64Str)
         let data = new Uint8Array(dataStr.length)
         for (let i = 0; i < dataStr.length; i++) {
           data[i] = dataStr.charCodeAt(i)
         }
-        url = window.URL.createObjectURL(new Blob([data], {type: meme}))
+        url = this.largeImgUrlShort = window.URL.createObjectURL(new Blob([data], {type: meme}))
       } else {
-        url = file.url
+        url = this.largeImgUrlShort = this.largeImgUrl
       }
-      window.open(url)
+      window.open(url) // Edge还是不允许打开blob URL，没办法了
     }
   }
 }
 </script>
 
 <style scoped>
 .mb {
-  margin-bottom: 1em
+  margin-bottom: 1em;
+}
+
+.image {
+  width: 100%;
 }
 </style>