[electron-react] 漫畫修圖軟體 - MangaPrettier 0.1.0 release

之前為了學React做了一個阿克西斯教傳教網站:
https://axiscult.zmcx16.moe/

再來是有想法想玩electron + react, 也剛好可以繼續練習React, 至於要做什麼side project來練功, 就想到自己手邊有不少漫畫因為掃描的畫質太差或曝光沒調好, 或是影像本身的對比太低, 導致看的眼睛很痛苦, 而photoshop要做批次處理又有點麻煩, 而且應該不少人對影像處理都不熟(我自己也是, 有開始想慢慢學些基礎知識...), 就想說來做個漫畫修圖的工具軟體好了~。

決定好目標之後, 再來就是該怎麼設計了。 程式架構方面決定照慣例以主程式(python) + GUI (electron + react), 畢竟python做影像處理很方便阿。 規劃好之後決定先玩下photoshop, 看一下那些功能是適合拿來做漫畫修圖的, 摸了一下心得如下:

1. 色階:

最基礎的photoshop影像處理功能, 調整影像明暗度非常有用, 不過因為找不到有library有提供這個功能, 所以就自己google演算法跟別人C++的實作寫了一個python版了, 參考資源如下:

   1. Algorithm for adjustment of image levels
   2. C++图像处理 -- 图像色阶调整


2. 影像增強 (對比/色度/明度/銳利度):

python的PIL有ImageEnhance這個功能, 直接使用就好, 超方便XD


3. 混合模式:

在玩photoshop時, 發現混合模式中有兩個很適合做漫畫修圖:

    1. 色彩增值: 對比度太低的漫畫用這個可以加強對比度, 只調對比的情況會比較單調, 個人覺得還不錯用。

    2. 柔光: 有些老漫畫掃描的品質曝光很低, 可是單純加亮度會整個變亮導致對比又不明顯, 變成得先加亮度在加對比才行, 不過如果用柔光一打下去就同時有這兩個功能, 對老漫畫來說很好用。

Python也有現成的混合模式Library可以用, 開心XDD


4. 曲線:

photoshop最常用的功能, 效果比起單純改色階更豐富, 可是要做這塊感覺我得花不少功夫刻UI, 所以先放生, 以後有閒在做...。


主程式搞定之後再來就是GUI了, 不過沒想到GUI這次踩的雷比我想的多得多, 條列如下:


1. zerorpc不穩斷線問題: 因為這次不像以往那樣簡單使用zerorpc, 得及時拿到影像處理後的預覽圖才行, 結果就踩到這個雷, 更詳細的過程有寫在這篇:

python與node.js RPC溝通 - 淺談zerorpc的一些坑

2. React hook domain knowledge 嚴重不足: 自己只買了React一本教學書, 結果那本是教React舊的語法(React class), 而現在React主打新的語法開發(React function), 這塊目前就是一樣邊寫邊查資料, 沒有一個系統性的學習, 所以踩雷程度比我想像的多不少, 雖然最後幾乎都有辦法克服, 不過也不知道自己這樣寫到底行不行, 得找個時間進行系統性的學習才行, 不然寫再多都覺得自己不會React... = =

3. 從python回傳預覽影像的速度有點慢, 不能改了即可見, 量測了一下python如果是跑色階處理的話, 以一般圖片大小來說大概100多ms就解決了, 而混合模式就會比較久, 可能會接近一秒, 再加上rpc請求跟回來的時間, 以及瀏覽器render的時間, 變成其實會讓user有感的等待時間, 這問題要解決的話, 只能core module跟GUI用同樣的語言開發並且在同個process, 等於如果要解決這個問題我得用javascript去做影像處理, 實作上面那些影像處理的方法再用html5的canvas畫出來...

恩...., 完全不想做, 畢竟是做功德的軟體, 預覽圖等一下下應該沒關係吧, 我又不是真的要做個photoshop出來, 就維持原架構吧XD


這樣跌跌撞撞下來, 最後還是勉強寫出個能用的東西了, demo如下:

Demo1

Demo1 - 柔光處理

Demo2

Demo2 - 色階

Demo3

Demo3 - 混合模式 + 影像增值

再來其實還有不少工作需要做:

1. 影像輸出格式: 目前是默認輸出png, 理想上至少也要再支持jpeg, 不過這樣GUI也要加個互動式窗給使用者選擇, 現在想先出第一版之後再補上。 (FGO活動開始了, 那邊重要XDD)

2. code quality: 目前就是先把功能寫完, 還沒有針對quality跟performance的部分作調整, 這部分之後有空再慢慢搞了~。

3. 學習影像處理的基礎知識: 目前的做法都是photoshop的功能摸一摸把看起來能用的功能加上去, 不過其實這樣很虛, 應該有其他更好 or 更適用的方法, 這塊就是真的得一步一腳印學影像處理的domain knowledge了...。


另外還有件在意的事, NPM真的是肥滋滋的怪物, 我也才用幾個library, 結果那個dependency可怕的要死, electron-builder包出來的未壓縮package竟然400多MB, 壓縮後也有100MB左右, 這個包到一堆用不到東西的問題會有改善的一天嗎....?

麻...總之先休息個幾天, 之後再來慢慢做其他預定事項吧~。


功能:

1. 色階
2. 影像增強
   • 對比增強
   • 亮度增強
   • 色度增強
   • 銳度增強
3. 混合模式
   • 色彩增值
   • 柔光

程式原始碼: 
https://github.com/zmcx16/MangaPrettier

應用程式位址:
https://github.com/zmcx16/MangaPrettier/releases/tag/0.1.0

• Windows - Windows 10
• Linux - Ubuntu 16.04+

Note. 這個工具主要是提供給像我一樣有類似需求的人使用的, 請注意轉檔就意味著資訊
的破壞, 麻煩有需要的人自行使用就好, 不要散布修改過的檔案, 畢竟實體書掃描是以專
業的技術做最大資訊的保留, 要分享也請麻煩以最完整的資訊傳遞分享給他人使用。


P.S. 最後題外話一下, 如果有人有推薦React Hook好的學習教材(拜託中文為主), 或是有推薦的影像處理學習的好教材, 再麻煩分享一下 :)  感恩~~~。