打造一个上传图片到图床利器的插件(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 installqiniu --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分支上开发的:
- 求一个手机端上传图片后可点击放大查看的插件
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 一个基于Vue的移动端多文件上传插件,支持常见图片的上传。
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
- 一个使用上传图片插件,图文编辑,时间插件的综合案例
- 利用JQuery及其插件做出一个上传图片及利用prototype插件显示剪裁图片的例题
- 关于上传图片插件webuploader的使用(同一个页面存在多个实例):
- ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例
- 分享一个图片上传插件(TP5.0)
- [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中
- DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
- 写markdown博客如何将截图快速上传到图床——记一个工具插件的实现
- 重新打包用户量过亿的开源截图软件——加入图片自动上传到图床的功能
- uwp开发图片上传插件demo
- ExtJS的编辑器HtmlEditor的一个图片插件
- 利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
- 解决THINKCMF后台文章的相册图集只能上传一个图片的问题
- Picasso:一个专为Android打造的强大的图片下载和缓存库
- JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)
- 【转】推荐一个很棒的jquery图片滚动效果插件-jqFancyTransitions