Alfred 有多强悍,我写了个一键上传图片的 workflow 来告诉你
“
阅读本文大概需要 10 分钟。
”
前言
一直以来用的都是 MarkEditor 写作,它有一个比较重要的功能:能自动将拷贝到编辑器中的截图同步到图床,这样如果要将文章导出发到其他平台,由于本地的图片在导出后自动转成了链接,所以无需担心图片在其他平台的识别问题。
但是最近发现文章同步到掘金或 CSDN 这些平台时,这些图片链接居然无法转存到他们的平台,应该是 markeditor 的图床用了防盗链技术导致图片无法转存。
「画外音:在掘金,CSDN 这些第三方平台发文时,一般会将文中非本平台的图片链接转存为本平台的,防止第三方图片链接失效导致文章中的图片在平台展示有问题。」
那么该怎么解决呢,有两种方式
一种是找到那些粘贴图片后可以自动上传图床并且生成的图片链接没有防盗链的平台,如 mdnice.com, 不过我试了一下 mdnice.com,貌似有 bug,Chrome 和 Safari 上粘贴图片后自动上传图片不起作用,360浏览器倒是可以。
另一种是在 MarkEditor 里设置其他图床,比如七牛云等,这样可以配置七牛云的图片不采用防盗链技术,但是要配置七牛云这样的图床,一来要收费,二来要去注册帐号,申请域名备案等等,有点麻烦。
考虑之后我决定自己整一个自动上传到图床的工具,无它,自己实现比较 Cool,怎么做呢,一般本地图片要转成最终的图床链接有以下两步
剪切或者复制图片
将图片上传到云端,上传成功后会返回云端的图片链接
我希望这个工具能达到如下流程图所示的效果:
复制图片/截图后,按下快捷键,自动完成之后上传图片到图床----->获取图片地址----->转成 markdown 中的图片地址(即![](云端图片url)这种形式)并将其 copy 到剪切板,这样我在 markdown 编辑器粘贴即可获取云端图片链接。
技术选型
使用一个快捷键就能完成后面的所有操作,第一时间我想到了 Alfred 的 workflow,Alfred 堪称是 Mac 的第一神器,它是一个用键盘通过热键、关键字、「自定义插件」来加快操作效率的工具,它不但是搜索工具,还是快速启动工具,甚至能够操作许多系统功能,扩展性极强,其中自定义插件是其核心功能,主要通过 workflow 实现。
什么是 workflow 呢,我们知道一个大的任务可以分解成一个个的小任务(work),这些小任务通过输入输出组合起来就能完成这个大任务,这样一个个 work 组合起来就形成了一个工作流(workflow)
其中每一个 work 可以由 php, python 等多个编程语言编写,通过 workflow 可以串起各个 work 的输入输出,这样只要触发一下快捷键,workflow 就能自动执行,最终会得到一个结果,比如我之前就写了一个时间戳日期互相转换的 workflow,如下:
在 workflow 中输入 ts(快捷键),后面跟着你要展示的时间戳/日期,即可将其转成日期/时间戳,非常方便。我们在日常中可以将一些重复的工作来用 workflow 实现,这样只要输入一个快捷键即可自动触发实现,能省下我们很多时间,不亦乐乎!
一键上传图片 workflow 实现思路
上节可知 workflow 确实强大,所以用它来实现我们的自动上传图片到图床的功能再合适不过了。
首先我选择了蛋壳(https://imgkr.com/)这个免费又稳定的图床,现在问题的关键是得看下上传图片到蛋壳拿到云端的图片逻辑该怎么写。我们可以打开 charles(或其他抓包工具)然后上传一张图片,成功后可以在 charles 看到上传图片的请求
然后我们看看这个上传图片的请求到底是咋样的,按以下步骤,点击 Copy as cURL,可以看看这个 curl 请求长啥样
拷贝出来后的 curl 请求长这样
从图中可以看到, curl 请求的请求部分除了图片的二进制数据是动态变化,其他都是固定的,图片的二进制数据无疑是从剪切板中来的,于是问题转化为了如何从剪切板中获取图片数据。
如何从剪切板中获取图片数据呢,这里介绍一个工具: pngpaste, 它可以将图片从剪切板中导出到指定路径,先用 brew 安装一下这个工具
brew install pngpaste
安装之后我们就可以用以下命令将剪切板中的图片导到指定路径了
pngpaste 图片路径
于是问题转化成如何获取指定路径图片的二进制数据,shell 做不到,不过 php 可以做到,所以我们最终用 php 重写了上文中的 curl 请求,也就是说我们最终选择用 php 来完成最终的 workflow, 最终的 php 实现的思路如下:
如有兴趣可以看下如下代码实现,注释写得很详尽了,相信大家应该能看懂
// 将剪切板中的图片拷贝到指定的路径
$command = '/usr/local/bin/pngpaste /tmp/test.jpeg';
$output = shell_exec($command);require 'workflows.php';
$wf = new Workflows();// 加载图片二进制数据
$data = file_get_contents('/tmp/test.jpeg');// 以下为上传图片逻辑
$ch = curl_init('http://imgkr.com/api/v2/files/upload');
$boundary = 'WebKitFormBoundaryCQV3KALJwjBXA5ue';$files = ['171f3cdebc5586.jpeg' => $data];
$delimiter = '-------------' . $boundary;
$data = '';
foreach ($files as $name => $content) {$data .= "--" . $delimiter . "\r\n". 'Content-Disposition: form-data; name="file"; filename="' . $name . '"' . "\r\nContent-Type: image/jpeg" . "\r\n\r\n". $content . "\r\n";
}
$data .= "--" . $delimiter . "--\r\n";
curl_setopt_array($ch, [CURLOPT_POST => true,CURLOPT_HTTPHEADER => ['Content-Type: multipart/form-data; boundary=' . $delimiter,'Content-Length: ' . strlen($data),'Host: imgkr.com','User-Agent: Mozilla/5.0 (Macintosh, Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36','X-Requested-With: XMLHttpRequest','Accept: */*','Origin: https://imgkr.com','Sec-Fetch-Site: same-origin','Sec-Fetch-Mode: cors','Sec-Fetch-Dest: empty','Referer: https://imgkr.com/','Accept-Language: zh,en-US,q=0.9,en,q=0.8,zh-CN,q=0.7','Cookie: _ga=GA1.2.377288389.1594181932, _gid=GA1.2.851545805.1594809662, _gat=1',],CURLOPT_POSTFIELDS => $data
]);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_ENCODING, 'gzip, deflate');
$test = json_decode(curl_exec($ch));// 以下三行为上传图片成功后,将其转化为 markdown 中的图片格式并将其写入剪切板中,这样最终在编辑器中粘贴后即为对应的 markdown 图片链接
$result = '\'![](' . $test->data . ')\'';
$copy = "echo $result | pbcopy";
shell_exec($copy);$query = '';// 以上执行成功后,在 Alfred 的下拉框中展示成功提示信息
$result = '拷贝到剪切板成功!';
$wf->result($query, $result, $result, $query, 'icon.png');
echo $wf->toxml();
「画外音:workflows.php 是用 php 写 workflow 的一个辅助插件,能在 Alfred 的下拉框中展示我们需要的结果,大家如有兴趣可以去 https://github.com/joetannenbaum/alfred-workflow 进一步了解一下」
配置 workflow
上传图片的逻辑既然写好,那配置 workflow 自然不在话下,配置的 workflow 如下:
以上 workflow 表示当按下「shift+cmd+s」时(即图片中的 Hotkey),会自动执行对应的脚本(Script Filter)将剪切板中的图片上传到图床(执行图片中的脚本 Script Filter),并最终将云端图片转成 markdown 的图片url 并拷贝到剪切板。这样我们只要在编辑器执行一下粘贴命令即可得到我们想要的云端图片 url,效果如下图所示,workflow 成功执行后会在 Alfred 的下拉框中展示「拷贝到剪切板成功」这个信息。
从此以后,如果我想截图并且获取此图片的链接即可一键搞定!再也不要机械的手动上传图片了!是不是很 Cool!
总结
工具化,自动化是工程师非常重要的思维方式,我们应该把重复低效的工作工具化,自动化,把有限的时候投入在更值得做的事情上去,就像现在的自动化测试等也是为了用工具化,自动化的思维帮助研发测试人员从重复低效的工作中解脱出来。workflow 无疑给我们提供了一个很好的手段,日常工作中,我们可以借助 workflow 来提升我们的工作效率!
推荐阅读
1
中国最懒城市,这里的人不想赚钱,只想躺平
2
手把手教学,如何解决 Git 冲突?
3
用鸿蒙跑了个 “hello world”!鸿蒙开发初体验
4
干货|这可能是最全的高并发、高性能、高可用解决方案总结
崔庆才
静觅博客博主,《Python3网络爬虫开发实战》作者
隐形字
个人公众号:进击的Coder
长按识别二维码关注
好文和朋友一起看~
Alfred 有多强悍,我写了个一键上传图片的 workflow 来告诉你相关推荐
- vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
- 写一个可以一键统一调整word文档格式的程序
要写一个可以一键统一调整 Word 文档格式的程序,可以使用 Microsoft Office Word 的 VBA 功能来实现. 步骤如下: 打开 Word 文档,在菜单栏中点击"开发人员 ...
- 缓存与库先写哪个,这十几张图告诉你
作者|莱乌 日常生产场景中,为了避免大量请求同时打在数据库上导致故障,数据库+缓存的方式已经成了日常标配. 对于读取的部分,大家都很熟悉.但是对于写的部分,到底是先写库还是先写缓存,这点可能困扰着很多 ...
- 这份中台与数据报表的干货我写了10小时,真不想告诉你
文末有超多干货! 这是一个很经典的组织架构图,任何公司,小到几十人的公司,大到几千人.上万人的集团企业,它的组织架构基本都是一样的. 那如果要提高企业的工作效率,从架构上来看,就得以这个为基础,那如果 ...
- 计算机网络手写笔记图片,一键收藏!清华学子这样记笔记!
原标题:一键收藏!清华学子这样记笔记! 还记得前段时间 朋友圈刷屏的清华学子笔记吗 整齐的排版. 清晰的思路无不令人赞叹 那么这些笔记是如何产生的呢? 相信看完下面这段视频 你会有更直观的了解 笔记教 ...
- 文案怎么写,才会更有画面感,告诉你2个方法(三)
本文继续分享:文案怎么写,才能更有画面感?这里有7个方法(三). 05 场景化打造 关联用户过往记忆 我们总是说文案要唤起用户的记忆,引起用户共鸣,引爆用户情绪- 这其实就是唤起用户内心深处的一个个熟 ...
- 【本人秃顶程序员】求求你别再写 bug 了,秃顶程序员告诉你避免空指针的 5 个案例!
←←←←←←←←←←←← 快!点关注 空指针是我们 Java 开发人员经常遇到的一个基本异常,这是一个极其普遍但似乎又无法根治的问题. 本文,栈长将带你了解什么是空指针,还有如何有效的避免空指针. 什 ...
- 赠书福利|一本书是写给美国人看的书,告诉我们,美国科技为什么领先?
热点追踪 / 深度探讨 / 实地探访 / 商务合作 近期,中美科技竞愈演愈烈,有一种误导认为,美国已经衰落或处在衰落的过程中.清醒的专家提醒我们:尽管从长期看,美国转型不易,有很大麻烦,但短期并没有 ...
- CSDN写博客去除上传图片的水印
平常在CSDN写博客,为了保护版权,所上传图片的右下角都会加上很不美观的水印,如果是一个很好看的半透明图案,我也就忍了,关键他还是一个链接,太难看了,就像下面这样,虽然有的时候不是很明显,但是看着还是 ...
最新文章
- 一不小心就踩了lombok的坑?
- Java使用原子类进行多线程的 i++ 操作示例
- 雷军晒3亿估值,意欲“收编”台湾硬件创业者?
- 纯净微擎框架 V 2.5.7 稳定运营版 免验证/去授权/防拉黑/支持本地模块安装源码
- java获取焦点_[Java教程]dialog获取焦点
- git push 报错:you are not allowed to upload merges
- python定义常量
- 数控直线工作台直线控制系统的simulink仿真
- 2022年面试工具篇Jmeter接口面试题及答案
- python package和目录_Python package和folder
- socket.io实现多人聊天
- noi国家集训队论文分类
- 乐乐音乐播放器 欢迎页面(二)
- 声散射 matlab,一种基于声波散射的高强度聚焦超声声场测量方法与流程
- 曾经被微软视为毒瘤的“开源”,现在却成了“宠儿”
- 经常用电脑,要注意脸部保养
- 内存卡删除的视频能恢复吗?四个步骤
- 清理Elasticsearch中过期的日志索引
- 服务器物理内存利用率,服务器提高物理内存利用率
- 百度 ping php,百度ping方法示例代码 自动ping百度
热门文章
- Solidworks如何标注垂直度,平行度
- 学数学出身的计算机大牛,学霸名单公布!2020年清华姚班、智班76名学霸名单曝光,均为学科竞赛大牛!...
- ubuntu20.04 使用 rplidar A2过程记录
- C# WPF 建立无边框(标题栏)的登录窗口
- 小功能_httpPacket解码
- 2021年红包封面小程序源码独立后台无限裂变线上线下引流工具微信流量主小程序
- 【网络聊天室】——基于socket编程的TCP/UDP网络聊天服务器
- IDEA连接mysql又报错!Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezone' prope
- 【洛谷】P1150 Peter的烟(配数学证明)
- POI使用详解 java 复杂excel导出