( 試試看 ) 在手機上看漫畫時，有一個體驗上的問題： 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大，更直覺的做法是： 直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式： 使用 OpenCV.js 做分鏡偵測 輸出 rect list 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」 整個系統可以拆成三層： 漫畫圖片 ↓ 影像處理（找出 rects） ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現（瀑布流） Step 1：灰階化 漫畫的資訊 90% 都在線條上，顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處： 降低維度 對邊緣偵測更穩定 對黑白漫畫特別有效 Step 2：邊緣偵測，抓出「分鏡的邊」 接下來用最經典、也最夠用的 Canny Edge Detection： cv.Canny(grayImage, edges, 50, 150); 在漫畫中，分鏡外框通常就是最明顯的邊界。 Step 3：形態學操作，把破碎邊框「補起來」 真實漫畫的線條並不完美，常常有斷線、陰影、留白。 所以要做一個很重要的步驟：膨脹（Dilation） const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是： 把細線「抹粗一點」， 讓本來斷掉的邊界連成封閉區域。 這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4：找輪廓，轉成矩形框（rect） 有了封閉區域之後，就可以找輪廓： cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour，代表一個「可能的分鏡區塊」。 接著轉成矩形： const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...
最近有時會使用Python作些簡單的後端或工具的開發，這對許多人來說可能很熟悉了，不過在此就讓我這個不熟的新手作些基本觀念的記錄。 在Python中，Package(包)和Module(模組)是用來管理程式碼的結構。 1. 模組 Module Module是包含Python程式碼的檔案，簡單來說就是一個.py的Source Code檔案，裡面可以包含函數、變數、類別等等。或者是一個己經編譯過的.pyc檔案也是一個Module。 如下定義一個a.py的模組。 # a.py a= 1 在其它的Python程式碼檔案裡面可以使用import語句來使用a.py這個模組內定義的函數、變數、類別等等。 如下測試引用a.py裡定義的a。 D:\temp\test>python Python 3.12.3 (tags/v3.12.3:f6650f9, Apr 9 2024, 14:05:25) [MSC v.1938 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> dir() ['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__'] >>> import a >>> dir() ['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a'] >>> a <module 'a' from 'D:\\temp\\test\\a.p...