markdown寫作的時候，圖片插入是一件比較麻煩的事情。常見的流程如下：
- 用截圖工具截圖；
- 將截圖保存到某個地方
- 修改截圖文件名
- 上傳截圖到某個圖床（如果不用“圍脖是個好圖床”這樣的工具，還得用客戶端登陸）
- 拿到圖床上的截圖的鏈接；然后用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 = "" % (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完全可以用這個實現；有興趣的可以自己實現，非常簡單。
