写个 Alfred 插件之“图片流水线”

Image Process

算是“写个 Alfred 插件”的第二弹吧(第一次的在这里),其实这个也能算在我写博客的 Workflow 里。总之都是一些非通用的插件,主要目的还是分享“折腾精神”的,大家轻拍。

要解决的问题

Lucifr 经常写些教程类的东西,难免要配些截图,但配图的过程一直最让我头大:

  • 截图:Lucifr 一直用 Mac 自带的截图功能,CMD+Shift+4,空格截窗体,或是直接拉方块。

  • 改名:截下来的图默认名称会是什么“Screen Shot 年月日几点.png”什么的,但 Lucifr 比较喜欢把图片名字弄得更可读一些,比如截图是只猫,那么我可能会起“This is a cat.png”,这个修改只能手动完成;同时我会想要让名称全部为小写,且空格替换为下划线,像是这样 “this_is_a_cat.png”,这样的名称更加 web-friendly,这个步骤我之前一直是用一个 Service 来完成。

  • 调整大小:博客配图无需太大,所以我一般都是限制宽度在 650px,大于这个宽度的就要等比例缩小一下,为了方便我之前也是用 Applescript 写了个插件。

  • 优化:一直是使用 ImageOptim,它能够在尽量少损失质量的情况下减小图片的大小,节省空间和流量。这一步我之前是用 Dropzone 完成的。

  • 上传:以上步骤完成后,我会把图片上传到我的 VPS 服务器上。这个步骤也是用 Dropzone 的 ftp 插件完成的。

  • Markdown 图片链接:Dropzone 的 ftp 插件会将上传后的图片链接拷贝到剪贴板中,我通过一个 TextExpander 脚本将其输入到博客中,当然是以 markdown 的形式:

    ![Alt Name](http://myhost.com/pics/image.png)
    

虽然这之间已经利用一些方法进行了简化,但整体步骤仍然太过繁复,用到的工具过多,影响写作的流畅性。

解决方法

我需要一个一步式的解决方案,我希望能把以上这些步骤都放到一个 Alfred 插件里去完成,并且尽量使用 bash 脚本。于是就有了以下的折腾:

  • 截图:用系统自带的命令 screencapture -i <file> 可以达到和 CMD+Shift+4 一样的效果,而且可以定义截图名和保存路径。

  • 改名echo <filename> | tr 'A-Z' 'a-z' | tr -s ' ' | tr ' ' '_' 就可以了,注意插件设置时要在 Advanced 里把 Escaping > Space 取消勾选。同时为每个图片加个时间戳 date +%s 避免因名称重复而被覆盖。

  • 调整大小:用到 ImageMagickconvert -resize 命令。这里我为了方便又调用了一下 Applescript 脚本,用来输入想要转换的最大宽度。

    ImageMagick是通过 Macports 安装的。而用 Macports 会涉及到环境参数调用的问题,因为 Alfred 的插件后台运行时是不载入环境参数的,所以我又在插件的开头部分加入了这部分参数。

  • 优化:虽然也可以用 open -a 来调用 ImageOptim,但我还是希望一切都在后台进行。于是我找到了 ImageOptim 的一个命令行版本:image_optim。我是通过 ruby gem 的方式安装的。同时通过 Macports 安装了依赖的包。

  • 上传:使用了 scp 的方式,需要有支持 scp 的服务器并且安装了公钥(请自行搜索公钥的生成和安装)。

  • Markdown 图片链接:直接用 echo | pbcopy 就解决了。

最终效果

还是视频最好说明问题:

Youtube | Youku

代码

虽然是很外行的拼凑,还是贴出来吧,欢迎帮忙改进:

Lucifr

Read more posts by this author.

Beijing, China http://lucifr.com