简化markdown写作中的贴图流程

markdown写作的时候,图片插入是一件比较麻烦的事情。常见的流程如下:

  1. 用截图工具截图;
  2. 将截图保存到某个地方
  3. 修改截图文件名
  4. 上传截图到某个图床(如果不用“围脖是个好图床”这样的工具,还得用客户端登陆)
  5. 拿到图床上的截图的链接;然后用markdown格式插入图片

这么复杂的流程,让人简直没有了插入图片的欲望;但是大量的文字没有图片,必然让人疲惫;

要是能随便截个图,然后直接粘贴就成了markdown格式就好了;自然是能够做到!懒就是生产力~

效果预览

首先看看最终达到的效果:
<img alt="效果预览" src="http://7sbqce.com1.z0.glb.clouddn.com/markdownmarkdownimg.gif" width="660" />

第一步,截图;第二步,粘贴;done!

详见github介绍:https://github.com/tiann/markdown-img-upload

图片上传

准备工作

首先要做的是,简化上传图片到图床这个手工的过程,甚至连拖动图片到浏览器插件都省略;这里就自然少不了使用图床的SDK,用代码来帮助我们完成上传操作;

这里选择七牛的图床,然后新建一个空间,比如我的叫做booluimg,然后点击空间设置里面的域名设置,看看域名是什么,那么以后我的图片就会上传到 这里。

用SDK上传图片

使用七牛提供的python SDK,下面的代码可以将一个文件上传到七牛的空间:

# -*- coding: utf-8 -*-

import os
from qiniu import Auth, put_file

access_key = '你的Access key' # AK
secret_key = '你的Secret Key' # SK

bucket_name = 'booluimg' # 七牛空间名

q = Auth(access_key, secret_key)

def upload_qiniu(path):
    ''' upload file to qiniu'''
    dirname, filename = os.path.split(path)
    key = 'markdown/%s' % filename # upload to qiniu's markdown dir

    token = q.upload_token(bucket_name, key)
    ret, info = put_file(token, key, path, check_crc=True)
    return ret != None and ret['key'] == key

访问剪切版

如果我们进行截图或者复制图片,那么图片是存储在系统的剪切版里面的;要将这个图片上传,必需先从剪切版里面弄出来。

mac

mac访问剪切版比较简单,如果是文本类型,那么可以直接使用pbcopy, pbpaste这两个命令解决;如果访问其他的多媒体类型,可以使用系统内置的python与objc的访问接口PyObjC;具体关于剪切版的文档可以参考PyObjC文档Objc剪切版文档(不会objc没关系,能看懂)

如下:

# -*- coding: utf-8 -*-
# clipboard.py
import time
from AppKit import NSPasteboard, NSPasteboardTypePNG, NSPasteboardTypeTIFF

def get_paste_img_file():
    pb = NSPasteboard.generalPasteboard()
    data_type = pb.types()
    # if img file
    print data_type
    now = int(time.time() * 1000) # used for filename
    if NSPasteboardTypePNG in data_type:
        # png
        data = pb.dataForType_(NSPasteboardTypePNG)
        filename = '%s.png' % now
        filepath = '/tmp/%s' % filename
        ret = data.writeToFile_atomically_(filepath, False)
        if ret:
            return filepath
    elif NSPasteboardTypeTIFF in data_type:
        # tiff
        data = pb.dataForType_(NSPasteboardTypeTIFF)
        filename = '%s.tiff' % now
        filepath = '/tmp/%s' % filename
        ret = data.writeToFile_atomically_(filepath, False)
        if ret:
            return filepath
    elif NSPasteboardTypeString in data_type:
        # string todo, recognise url of png & jpg
        pass

Windows

windows下,可以装个pywin32然后使用win32api直接访问,具体如何操作自己解决。

自动化流程

先阐述一下要达到的理想状态:用截图工具截图(图片默认保存在剪切版),然后在编辑器按下某个类似于粘贴的快捷键,得到一个上传好了到七牛的marddown格式的图片;

如何达到这个要求呢?上传图片以及到从剪切版获取图片都已经完成,接下来就是这个按键的自动化操作了;在mac上,可以使用Alfred工作流,Windows上,可以使用Autohotkey。

mac下使用alfred工作流

使用Alfred新建一个空白的工作流,然后新建一个trigger,快捷键绑定为“ctrl + cmd + v”;然后新建一个run script,选择python;然后填上如下代码:

query = "{query}"
from clipboard import get_paste_img_file
from upload import upload_qiniu
import os

url = "http://7sbqce.com1.z0.glb.clouddn.com/markdown"

img_file = get_paste_img_file()
if img_file:
    # has file
    ret = upload_qiniu(img_file)
    if ret:
        # upload success
        name = os.path.split(img_file)[1]
        markdown_url = "![](%s/%s?imageMogr2/thumbnail/!50p/quality/100!)" % (url, name)
        # make it to clipboard
        os.system("echo '%s' | pbcopy" % markdown_url)
        os.system('osascript -e \'tell application "System Events" to keystroke "v" using command down\'')
    else: print "upload_failed"
else:
    print "get img file failed"

其中,复制到剪切版以及按下cmd + v复制这个功能,使用的系统命令pbcopy, osascript这体现了python作为胶水语言的强大之处!

这样,这个workflow就完成了,用系统截图工具cmd + option +ctrl + 4截个图,然后在一个编辑器里面按下cmd + ctrl + v看看是什么效果~

另外有个问题是,mac的retina屏幕截图如果直接使用的话,会是原来的两倍大,我用了七牛的API将图片缩小了一半,但是质量却不太好,不知道有什么办法。

更新:使用mac自带的sips工具得到图片的尺寸;然后使用img标签替代markdown格式的图片;然后使用css属性控制这个图片的宽度。
更新2: 使用mac通知中心在上传图片失败的时候给出提醒

windows下使用autohotkey

windows下面没有Alfred,但是有强大的AutoHotKey,出发快捷键以及按下ctrl + v完全可以用这个实现;有兴趣的可以自己实现,非常简单。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容