使用Electron開發乙個吸色工具的心路歷程

2021-09-24 09:10:53 字數 2028 閱讀 5599

」世界上只有一種英雄主義,那就是認清自己的髮際線之後依然熱愛擼碼「 -- 歐大強·羅蘭

我的軟體,介面一定要好看,logo一定要大氣,主色調要那種低沉**又不失莊重,氣勢磅礴的黑。

(獻醜了。果然設計師不是隨便就能做的)

功能大致包括以下幾點

electron沒有api可以直接拿到當前指標所在位置的色值,但是提供了獲取桌面資源的方法。在執行取色操作時使用desktopcapturer將當前桌面截圖,然後在canvas上展示並使用getimagedata()獲取指定色值。easy。

關於electron的介紹網路有很多,上手難度也不算高,執行緒之間的關係與操作還有api文件寫的非常詳細,但這不意味著你(zuo)起來就能一帆風順了。

通過ipc和global我們很容易就能實現乙個簡易的狀態管理機制,在這裡我碰到了第乙個坑。

因為remote複製物件而不是提供引用,所以在渲染程序中操作的global物件需要提前在主程序中定義初始值。

main process:

global.sharedobj = ;

複製**

renderer process:

remote.getglobal('sharedobj').prop1 = 125;

複製**

通過desktopcapturer.getsources()api我們可以得到乙個desktopcapturersource物件,再配合getusermedia我們可以很方便的獲取當前可用資源。

// in the renderer process.

const = require('electron')

desktopcapturer.getsources(, (error, sources) =>

}}).then((stream) => ).catch((e) => ...)

})複製**

以上是官方給的使用文件,將video的第一幀繪製到canvas上便成功對當前桌面進行截圖。但事情並沒有這麼簡單,在我閱片無數的雙眼下,任何細微的差別都無處遁行,使用getusermedia得到的影象竟然有色差

我測算了一下,截圖得到的和原圖相比,綠色通道的值要高一些,所以我猜測造成色差的原因可能是由於瀏覽器使用的是

srgb色域,而顯示器使用的是argb色域(希望有大佬能幫忙指正)。

雖然通過desktopcapturersource物件上的thumnail(nativeimage)能直接得到當前桌面的縮圖(截圖)並且沒有色差,但是desktopcapturer在工作中是會阻塞程序的,不推薦直接通過thumnail來獲取百分百比例的桌面截圖。所以最後我選擇使用desktop-screenshot這個第三方node庫來實現截圖步驟。

我使用了lowdb這個node庫來儲存設定的快捷鍵和歷史色值,開發的時候一切正常,可打包後在mac上執行起來就會報錯erofs: read-only file system

來獲取檔案路徑的,我們無法確定使用者會將軟體放到哪個目錄,所以我建議將需要被修改的檔案放入系統資料夾或臨時資料夾。

oros.tmpdir() // node原生模組獲得臨時檔案路徑

複製**

除了盡可能減少dependencies的依賴之外,基本無解。別問,問就是100m起。

雖然這是乙個簡單的專案,還有很多沒來得及深入發掘。

雖然常伴小坑,但總的來說瑕不掩瑜,體驗還是相當到位的。 如果你也想體驗一把桌面應用開發,electron是個非常靠譜的選擇。

github

Electron 建立乙個空白的介面

首先新增乙個lorikeet版本的electron應用。另 也可以直接設定mainwindow.setmenu null 1 use strict 2 const electron require electron 4 const browserwindow electron.browserwind...

使用vue開發乙個專案(一)

在學習了vue基礎之後,為了能夠在vue開發專案上有乙個真正的提公升,所以打算用vue來做乙個完整的專案,將其記錄下來 首先建立乙個工程資料夾,在這個資料夾下開啟命令列工具,在命令列中敲入以下命令安裝上vue的腳手架 cnpm install g vue cli 全域性安裝vue clivue in...

使用Electron開發PC客戶端

最近公司要求開發乙個pc客戶端,要求不能使用.net開發 為了不讓使用者安裝.net framework 所以就選擇了electron 隨口聽別人說了一句,之前從來沒有接觸過 目前專案要完畢了,所以就想記錄一下在開發過程中遇到的一些問題和開發過程中的一些思路。1.electron的介紹 3.pc客戶...