打造一个上传图片到图床利器的插件

鉴于写博客截图手动上传到图床的步骤过于繁琐，很久之前写了一个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