Mac版上傳圖片利器插件的實現

鑒於寫博客截圖手動上傳到圖床的步驟過於繁瑣，很久之前寫了一個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

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

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

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

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

• save之後這些參數應該是持久化到文件中了，具體沒有研究。

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

  ~/.katana/uploads

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

具體代碼細節就不介紹了，感興趣自己去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)
  }
})

Download

給一個打包好的鏈接，感興趣的可以玩一下：

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

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

https://github.com/harlanc/katana

記一個上傳圖片到圖床利器插件的實現（Mac版 開源）