我用Electron做了一個圖片上傳的工具——PicGo

NO IMAGE

原文發表於我的博客

我用Electron做了一個圖片上傳的工具——PicGo

前言

作為一個比較常用markdown寫文章、博客的人,在markdown裡插入圖片對我而言一直一個比較繁瑣的活。以前每週寫電影推薦的時候,我要在markdown裡插入一張電影海報,我需要如下的操作:

  1. 打開豆瓣的網站,選一張滿意的海報,下載
  2. 打開七牛的網站,登錄,點點點,找到上傳,上傳
  3. 關閉上傳窗口,找到地址,複製地址,再關閉七牛
  4. 粘貼到markdown裡

每次都需要繁瑣的打開網頁進行一些必要而枯燥的操作。這樣很麻煩。在用過mac上一款很不錯的小工具應用iPic後我非常喜歡它的簡潔操作。不過它免費版本並不支持七牛圖床。所以我就想著,能不能自己寫一個類似的工具呢?結合自己的使用習慣再順便加點功能。

於是我就開始自己的圖片上傳工具的開發了。它叫做PicGo

技術選型

最早最早我想著用swift來寫一個原生的應用,主要想著能做出體積友良、性能優秀的應用。不過鑑於swift迭代的太快,很多教程都已經不適合了。並且swift網上的教程對我這個小前端來說著實要學的東西不少。我只是想做個方便自己的工具而已,一切以方便自己作為大前提。作為一個前端工程師,我決定採用electron來開發。同時因為我是Vue的粉絲,一併就使用了electron-vue作為我的electron開發腳手架。不得不說,electron-vue提供的腳手架做的真的很用心,而且我自己要做修改加配置什麼的也很方便。日後做跨平臺支持的話也比較容易。

需求分析

由於用過iPic,很多它的一些操作模式我覺得特別值得借鑑。比如我想要個簡單的拖拽就能實現上傳,我想要能夠上傳我剪貼板的圖片,我想要是實現上傳成功後自動複製鏈接到剪貼板,這樣我就可以直接編輯了。

那麼這樣一來,我編輯文章只需要如下操作:

  • 找到要上傳的圖片,使用這個工具直接上傳
  • 上傳成功後自動複製地址到剪貼板,在markdown裡直接粘貼

一下子省去了很多原本繁瑣的操作!

功能展示

前前後後,用每天的閒暇時間從0開始學習electron框架,到Travis-ci構建出第一個可用的版本,大概花了一個月的時間。基本實現了我自己當初的目標,極大提升了我自己的文章寫作體驗。

操作演示

我用Electron做了一個圖片上傳的工具——PicGo

精緻設計

我用Electron做了一個圖片上傳的工具——PicGo

macOS系統下,支持拖拽至menubar圖標實現上傳。menubar app 窗口顯示最新上傳的5張圖片以及剪貼板裡的圖片。點擊圖片自動將上傳的鏈接複製到剪貼板。

便捷管理

我用Electron做了一個圖片上傳的工具——PicGo

查看你的上傳記錄,重複使用更方便。支持點擊圖片大圖查看。支持刪除圖片(僅本地記錄),讓界面更加乾淨。

可選圖床

我用Electron做了一個圖片上傳的工具——PicGo

目前支持微博圖床和七牛圖床。未來將支持更多。方便不同圖床的上傳需求。

多樣鏈接

我用Electron做了一個圖片上傳的工具——PicGo

支持4種剪貼板鏈接格式,讓你的文本編輯遊刃有餘。

後續工作

目前PicGo還是一個很年輕的項目,bug肯定是不少的,功能方面也有所欠缺。所以還需要不斷地完善。我希望大家在使用的過程中有什麼意見或者建議都可以在項目倉庫裡的issues裡提出來~

  • 目前暫不支持Windows和linux,未來將會逐步支持。
  • 未來將支持更多的圖床。如果可能,可以支持自定義的圖床(只要設定好協議)
  • 將集成系統服務,提供一鍵上傳的全局快捷鍵
  • 提升用戶體驗,修bug

最後

希望這是一個能夠提升你文章編輯體驗的工具。如果你想學習electron開發,我也會在不久之後寫幾篇文章用於記錄我是如何開發PicGo這個electron應用的。如果你喜歡它,歡迎給這個項目點個Star。另外,它是開源免費的,如果你覺得它對你有所幫助,也可以考慮給我打賞一杯喝咖啡的錢~二維碼在項目首頁

相關文章

Electronvue開發實戰1——Main進程和Renderer進程的簡單開發

Electronvue開發實戰0——Electronvue入門

Vue組件開發實錄:組件的三種調用方式

我的2017年前端之路總結