Merge pull request #4 from xfgryujk/dev

v1.1.1

README.md

@@ -2,25 +2,29 @@
 自动加密解密微博上传的图片
 
 ## 如何使用
-在浏览器地址栏输入以下代码，上传图片时就会自动加密，在图片上点击鼠标右键就会自动解密。注意前面的 "`javascript:`" 必须手动输入，不能复制粘贴，否则会被浏览器自动去掉。执行成功后，点击微博文本框下面的北极熊 ~~（天哥哥）~~ 按钮可以打开设置界面
+### 方法 1，适合临时使用
+在浏览器地址栏输入以下代码，上传图片时就会自动加密，在图片上点击鼠标右键就会自动解密。注意前面的 "`javascript:`" 必须手动输入，不能复制粘贴，否则会被浏览器自动去掉。执行成功后，点击左下角的北极熊 ~~（天哥哥）~~ 按钮可以打开设置界面
 
 ```javascript
 javascript:fetch('https://raw.githubusercontent.com/xfgryujk/weibo-img-crypto/master/weibo-img-crypto.js').then(res => res.text(), e => alert('载入失败：' + e)).then(res => {let script = document.createElement('script'); script.innerHTML = res; document.body.appendChild(script)})
 ```
 
 也可以按 `Ctrl + Shift + J` 打开控制台，在控制台输入。也可以将这些代码作为网址添加到书签/收藏夹，能更快使用
 
-### 高级
+### 方法 2，适合长期使用
+首先安装 [Tampermonkey](http://tampermonkey.net/) 浏览器扩展，然后[去 Greasy Fork 添加 weibo-img-crypto 脚本](https://greasyfork.org/zh-CN/scripts/370359-weibo-img-crypto)。这样访问微博时会自动执行方法 1 的代码
+
+## 高级
 加密的原理是把 RGB 数据随机移动到一个新位置，所以加密解密时的随机种子必须一样。默认的随机种子是 `114514`，可以在设置界面修改随机种子
 
 由于 JPEG 是有损压缩，解密后的图片有高频噪声，不过可以被人眼自动过滤。理论上如果数据无损，解密后的图片和原图一样 ~~（都怪渣浪不用 PNG）~~
 
-### 兼容性
+## 兼容性
 目前不支持 GIF 图，以后可能支持
 
 只在 Chrome、Edge 浏览器测试过，不保证支持其他浏览器 ~~（IE 是什么？我可不知道）~~
 
-### 其他要注意的
+## 其他要注意的
 如果加了水印，解密后的图片会有杂色
 
 如果原图太大了分辨率会被改变导致解密失败，可以查看原图后再解密

package.json

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

src/gui/gui.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <gui-button :isFloat="isButtonFloat" @click="openGui"></gui-button>
+    <el-tooltip class="item" content="发色图救救北极熊">
+      <a href="#" @click.prevent="openGui" style="position: fixed; left: 0; bottom: 0">
+        <img src="https://ww1.sinaimg.cn/mw690/be15a4ddjw8fbet7h4rpoj209z0c7q39.jpg" width="40px" height="49px">
+      </a>
+    </el-tooltip>
 
-    <el-dialog title="weibo-img-crypto" :visible.sync="dialogVisible">
+    <el-dialog title="weibo-img-crypto v1.1.1" :visible.sync="dialogVisible">
       <el-form :model="form" label-width="100px">
         <el-form-item label="加密">
           <el-switch v-model="form.enableEncryption"></el-switch>
@@ -17,6 +21,9 @@
           <el-input v-model="form.randomSeed" type="number"></el-input>
         </el-form-item>
       </el-form>
+      <p>
+        有了<a href="https://greasyfork.org/zh-CN/scripts/370359-weibo-img-crypto" target="_blank">油猴脚本</a>，能更快使用 weibo-img-crypto，详情见 <a href="https://github.com/xfgryujk/weibo-img-crypto" target="_blank">GitHub 库 readme</a>
+      </p>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
@@ -27,13 +34,9 @@
 </template>
 
 <script>
-import GuiButton from './gui-button'
 import {getConfig, setConfig} from '../config'
 
 export default {
-  components: {
-    GuiButton
-  },
   props: [
     'isButtonFloat'
   ],

src/gui/index.js

@@ -7,20 +7,10 @@ export function initGui () {
 
 function addButton () {
   let button = document.createElement('a')
-  let parent = document.querySelector('.func_area')
-  // 兼容查看原图页面
-  let isButtonFloat = !parent
-  if (isButtonFloat) {
-    parent = document.body
-  }
-  parent.appendChild(button)
+  document.body.appendChild(button)
   /* eslint-disable no-new */
   new Vue({
     el: button,
-    render: h => h(Gui, {
-      props: {
-        isButtonFloat
-      }
-    })
+    render: h => h(Gui)
   })
 }

src/hooks.js

@@ -1,3 +1,4 @@
+import { Notification } from 'element-ui'
 import {encrypt, decrypt} from './codec'
 import {getConfig} from './config'
 
@@ -24,9 +25,9 @@ function hookUpload () {
   let root = window.STK.namespace ? window.STK.namespace.v6home : window.STK // 用来兼容查看原图页面
   let originalIjax = root.core.io.ijax
   root.core.io.ijax = function (args) {
-    if (!getConfig().enableEncryption
-        || !args.url.endsWith('/pic_upload.php')
-        || isUploadingGif) { // 暂时不支持GIF
+    if (!getConfig().enableEncryption ||
+        !args.url.endsWith('/pic_upload.php') ||
+        isUploadingGif) { // 暂时不支持GIF
       return originalIjax(args)
     }
 
@@ -70,15 +71,20 @@ function hookUpload () {
 // 监听右键菜单
 function hookContextMenu () {
   document.addEventListener('contextmenu', event => {
-    if (getConfig().enableDecryption
-        && event.target instanceof window.Image) {
+    if (getConfig().enableDecryption &&
+        event.target instanceof window.Image) {
       // event.preventDefault() // 为了右键保存图片这里先注释掉了
       let originImg = event.target
 
       // 跨域
       let img = new window.Image()
       img.crossOrigin = 'anonymous'
-      img.onerror = () => window.alert('载入图片失败，可能是跨域问题？')
+      img.onerror = () => Notification.error({
+        title: '解密图片',
+        message: '载入图片失败，可能是跨域问题？',
+        position: 'bottom-left',
+        duration: 3000
+      })
       img.onload = () => {
         [canvas.width, canvas.height] = [img.width, img.height]
         ctx.drawImage(img, 0, 0)