打造一個上傳圖片到圖牀利器的插件（Mac版 開源）

寫markdown博客如何將截圖快速上傳到圖牀——記一個工具插件的實現(windows版 開源)（2017-05-31 20:23）

打造一個上傳圖片到圖牀利器的插件

鑑於寫博客截圖手動上傳到圖牀的步驟過於繁瑣，好久以前寫了一個windows版的截圖軟件插件，用於把圖片快速上傳到圖牀

從新打包用戶量過億的開源截圖軟件——加入圖片自動上傳到圖牀的功能

如今換系統了，由windows換成了Mac，系統確實好用，但截圖上傳到圖牀的功能無法子弄過來，網上搜了下現成的軟件，都不太好用。Mac免費軟件不像windows那麼多。在windows系統上是在Greenshot的基礎上實現的七牛圖牀插件，這個軟件在Mac下也有，可是不開源。因此仍是本身動手吧，實現一個mac版的上傳到七牛圖牀的軟件插件。好了，先上最終效果圖：

選擇一款mac版開源截圖軟件

選擇的截圖軟件須要知足兩個條件：

• 一個是易用性，界面友好
• 另一個是這個軟件要支持插件

google了一下，搜了幾個，最後覺的katana這個軟件還不錯。

雖然功能簡單了點，但界面作的比較專業，並且支持service，上面的imgur是一個國外的免費的圖牀服務。好了，就在這上面整吧。

研究打包

這個軟件是用Javascript寫的，才知道用javascrpit還能作出Mac的app，開發工具選擇使用WebStorm。研究源碼的時候通常是邊操做軟件，邊看代碼，大概把整個軟件輪廓和相關的細節瞭解了一下。

接下來比較棘手的實際上是如何把源碼打包成mac app，把github上打包好的軟件下載下來研究了一番。看一下它的目錄結構，看到了Framework這個文件夾，進到裏面看一下：

drwxr-xr-x  6 zexu  staff   192B  6 24 16:48 Electron Framework.framework
drwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper EH.app
drwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper NP.app
drwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper.app
drwxr-xr-x  7 zexu  staff   224B  6 24 16:48 Mantle.framework
drwxr-xr-x  7 zexu  staff   224B  6 24 16:48 ReactiveCocoa.framework
drwxr-xr-x  7 zexu  staff   224B  6 24 16:48 Squirrel.framework

看到了Electron這個東西，接着google，下面是官網的介紹:

使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

看到package.json下面有下面幾個依賴包：

"devDependencies": {
    "electron": "^2.0.3",
    "electron-packager": "^12.0.2",
    "standard": "^11.0.1"
  }

應該就是它了，用的是electron框架打包的app。

安裝依賴

npm install

把全部依賴包安裝到本地，而後cd到項目根目錄執行下面的命令：

zexudeMacBook-Pro:katana zexu$ electron-packager . --overwrite --platform=darwin --arch=x64 --icon=./app/static/images/icon.icns --prune=true --out=release-builds

• 注意，我把electron-packager 進行全局安裝了。

就一條命令，打包就成了，居然如此簡潔。

研究源碼和功能實現

先把qiniu的npm包裝上：

npm install qiniu --save

爲這個軟件寫插件須要寫css,html和一寫js的功能函數。一個軟件的功能不少，但要快速聚焦到相關的功能點，有時候光看代碼的效率實在是低。把代碼跑起來，看一些log輸出是不錯的快速熟悉代碼的方法。

如何才能debug呢。看下圖，按照紅色字體添加一個新的Debug Configurations：

網上說解釋器的路徑要寫成下面這樣：

~/github/katana/node_modules/.bin/electron

試了一下webstorm中這個路徑是打不開的，但發現這個文件是一個軟鏈，指向的是上圖中的解釋器路徑，因此直接寫成圖片上的路徑。網上的帖子說設置好以後是能夠加斷點調試的。試了幾回沒有成功，軟件會閃退，應該和這個軟件的多進程相關。log到是能看了，但有些Log不能打印到控制檯上，仍是多進程的問題，最後找到了解決方法，使用下面的變量來打印log:

const con = require('electron').remote.getGlobal('console')

軟件的整個工做流程是下面這樣的：

• 把AK,SK,Scope和Default Domain配置好，不熟悉這幾個參數的參考windows版的軟件配置。

• save以後這些參數被持久化到文件中。

• 截圖的時候，先調用Mac的截圖接口，生成截圖文件保存到以下路徑中：

  ~/.katana/uploads

• 最後調用qiniu的接口把文件上傳到七牛圖牀。

• markdown格式的圖片連接會拷貝到剪貼板中，commond+v將其複製到編輯器中。

具體代碼細節就不介紹了，感興趣本身去github看吧。qiniu的官方文檔感受比較亂。研究了一些時間，把這段代碼貼一下：

const ak = _qiniuService.accessKey
const sk = _qiniuService.secretKey
const sc = _qiniuService.Scope
const dm = _qiniuService.defaultDomain

var key = path.basename(file)
var mdpath = '![](' + path.join(dm, key) + ')'
const link = {link: mdpath}

var mac = new qiniu.auth.digest.Mac(ak, sk)
var options = {
  scope: sc + ':' + key,
  expires: 0
}
var putPolicy = new qiniu.rs.PutPolicy(options)
var uploadToken = putPolicy.uploadToken(mac)
var config = new qiniu.conf.Config()

config.zone = qiniu.zone.Zone_z1
var formUploader = new qiniu.form_up.FormUploader(config)
var putExtra = new qiniu.form_up.PutExtra()

formUploader.putFile(uploadToken, key, file, putExtra, function ( respErr, respBody, respInfo) {
  console.log('status:' + respInfo.statusCode)
  if (respErr) {
    callback(null, respErr)
    throw respErr
  }
  if (respInfo.statusCode === 200) {
    callback(link)
    console.log(respBody)
  } else {
    console.log(respInfo.statusCode)
    console.log(respBody)
    //callback(link)
  }
})

• 注意：上面的代碼中， zone是寫死的，因此這個插件目前只支持華北的服務器。若支持其它地區的服務器，修改下面的語句：
  config.zone = qiniu.zone.Zone_z1

各個地區以及對應的zone變量值以下：

• 華東 qiniu.zone.Zone_z0
• 華北 qiniu.zone.Zone_z1
• 華南 qiniu.zone.Zone_z2
• 北美 qiniu.zone.Zone_na0

Download

給一個打包好的連接，感興趣的能夠玩一下：

連接:https://pan.baidu.com/s/1JEej70eO5FCqF6CibOmdLQ 密碼:qnq7

源碼連接,在dev分支上開發的：

https://github.com/harlanc/katana