Merge pull request #10 from xfgryujk/dev

v1.3.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weibo-img-crypto",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Automatically encrypt images before uploading them to Weibo.",
   "author": "xfgryujk <[email protected]>",
   "private": true,

src/gui/gui.vue

@@ -1,12 +1,12 @@
 <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>
 
-    <el-dialog title="weibo-img-crypto v1.3.0" :visible.sync="dialogVisible">
+    <el-dialog title="weibo-img-crypto v1.3.1" :visible.sync="dialogVisible">
       <el-tabs>
         <el-tab-pane label="基础">
           <el-form label-width="100px">
@@ -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>

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>