打造一個上傳圖片到圖床利器的插件(Mac版 開源)(2018-06-24 19:44)
更新於2018年2月##
做了以下改動:
1.修復了一個bug,把服務器區域做成可配:
七牛有華北,華東,華南以及美國三個服務器區域,根據自己的情況進行相應的選擇即可。
2.把插件打包進了exe安裝包中,下載鏈接:
鏈接: 密碼: 1749
因此不要再使用本文的替換方法進行安裝了,直接安裝即可,七牛插件是默認安裝的。
對應文章更新:
重新打包用戶量過億的開源截圖軟件——加入圖片自動上傳到圖床的功能(2018-02-09 07:04)
如何使用:
除了正確配置Zone之外,其余配置查閱本文的6.2節。
1. 背景
寫博客有一個自己的圖床是不錯的選擇,如果不借助工具,在markdown博客中添加圖片的步驟如下:
- 截取圖片,保存到本地(得來回點對話框,選擇保存路徑,選擇文件類型,輸入文件名)。
- 上傳到圖床服務器(打開網頁,跳轉到上傳頁面,點擊browse,選擇本地文件,upload...)
- 獲取圖片鏈接(為了確保無誤,可以在瀏覽器中打開圖片,並復制link)
- 將鏈接添加到markdown博客中(Ctrl+v 復制到博客中)
還是很繁瑣的,那么可不可以自己實現一個工具來做這些繁瑣的事情呢?
2. 分析##
首先要確定使用哪家的圖床服務,網上搜了一下,都說七牛雲比較靠譜(這里不是打廣告。。),提供的SDK也比較全,我們這里就用七牛雲,接下來確定該如何實現一個截圖工具來實現截圖+圖片upload功能,從頭實現一個工具不太現實,找一個開源的截圖工具比較靠譜,博主目前正在用的是greenshot,發現這正好是一個開源的工具,好了,就是它了。
3. 需求##
為greenshot添加一個插件,初步實現以下功能:
- 針對七牛雲SDK接口,添加配置對話框,可以配置accesskey,secretkey,scope,default domain來支持上傳,並能將這些配置保存到本地(為了簡單,將access key和secret key保存成明文)
- 可以為圖片名字添加前綴
- 支持選擇文件類型,支持bmp,gif,png,jpg等格式
- 上傳文件后可以自動將圖床中的文件link復制到剪貼板
4. 准備##
- 開發工具 visual Studio 2017
- 原材料 七牛雲SDK源碼+greenshot源碼
- 其它 申請一個七牛雲賬號,開通圖床服務(可以百度或者google...)
5. 實現##
過程省略,實現比較簡單,大部分時間花在熟悉greenshot代碼架構和代碼調試上,直接上源碼:
https://github.com/harlanc/greenshot
6. Demo##
6.1 安裝####
-
首先安裝GreenShot:http://getgreenshot.org/ -
如果不想重新編譯源碼,直接到下面的網盤鏈接下載插件(2017-12-12,又改了下代碼,保存在七牛雲上的圖片只能保留一天時間,把這個限制去掉了,自己重新編譯一下源碼吧):
鏈接: https://pan.baidu.com/s/1sloCA53 密碼: 2pv5壓縮包中包含5個文件,一個gsp插件,兩個xml語言文件,兩個DLL,拷貝到對應的目錄下:
6.2 配置####
打開GreenShot,首先我們驗證一下插件是否加載成功,郵件單擊GreenShot圖標,單擊Preference...:
如果看到插件列在了Plugins中,說明加在成功:
打開配置主界面:
序號1到4必須填正確,這些都該填寫什么呢?
見下圖,登陸七牛雲,點擊個人中心->密鑰管理,即可看到AK和SK:
序號3對應着存儲空間名稱,你可以新建存儲空間,把對應的名字填寫到Scope里:
序號4對應着域名,這個域名是用於拼寫復制到剪貼板的圖片link的,不知道有沒有更好的方法。目前樓主用的是測試域名:
序號5是圖片格式,序號6為圖片名字前綴,方便管理圖片。
好了,配置好之后,點擊OK,這些配置信息都會保存到本地的配置文件中,注意AK和SK在這里是明文保存,小心不要泄露。。
6.3 使用####
看一下如何使用,右鍵單擊GreenShot圖標,點擊Capture region,或者其他的截圖方式:
如果需要編輯圖片,你可以選擇Open in image editor,如果你想直接上傳,單擊Upload to Qiniu即可。
編輯完圖片之后,單擊七牛圖標。
最后一步,Ctrl+V ,將剪貼板中的圖片鏈接拷貝到你的博客中,大功告成!如果有任何問題,請告知樓主,謝謝。
7. 總結##
通過使用GreenShot插件,上傳圖片到七牛雲只需要點擊4下鼠標即可,節省了時間。