寫markdown博客如何將截圖快速上傳到圖床——記一個工具插件的實現(windows版 開源)


打造一個上傳圖片到圖床利器的插件(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下鼠標即可,節省了時間。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM