跳到主要內容

窮人的 AI：自動漫畫分鏡切割

 (試試看)

在手機上看漫畫時，有一個體驗上的問題：

  • 漫畫原本是「整頁設計」

  • 手機最適合的是「一格一格往下滑」

與其強迫使用者縮放、拖曳、放大，更直覺的做法是：

直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。

這篇文章分享一個不靠深度學習、完全在前端完成的實作方式：

  1. 使用 OpenCV.js 做分鏡偵測

  2. 輸出 rect list

  3. 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」

整個系統可以拆成三層：

漫畫圖片
   ↓
影像處理（找出 rects）
   ↓
排序後的 rect list
   ↓
全畫面 Canvas 逐格呈現（瀑布流）

Step 1：灰階化

漫畫的資訊 90% 都在線條上，顏色反而是干擾。

cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY);

灰階化的好處：

  1. 降低維度

  2. 對邊緣偵測更穩定

  3. 對黑白漫畫特別有效



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.width, rect.height]);

並用面積過濾掉雜訊：

if (cv.contourArea(contour) > 5000) { ... }

Step 5：移除「被完全包住」的多餘 rect

實務上你一定會遇到這種情況：同一格分鏡，被抓出「一個大框 + 一個小框」。

這時不需要聰明演算法，只要幾何判斷：

function isFullyOverlapped(small, large) {
  return (
    x1 >= x2 &&
    y1 >= y2 &&
    x1 + w1 <= x2 + w2 &&
    y1 + h1 <= y2 + h2
  );
}

完全被包住的，直接丟掉。


Step 6：排序 rect，讓它「像是在看漫畫」

這一步非常關鍵，也非常不完美，但夠用。

rects.sort((a, b) => a[1] - b[1] || b[0] - a[0]);

意思是：

  1. 先由上到下

  2. 同一排由右到左

⚠️ 這不一定符合所有漫畫的分鏡語法，但在手機瀑布流閱讀中：

「大致合理」比「絕對正確」重要得多

 

到這一步，我們已經有：

[
  [x, y, w, h],
  [x, y, w, h],
  ...
]

每一個 rect，本質上就是一個「閱讀單位」

現在可以拿來作顯示了。


全畫面 Canvas 的好處，如果你把每個 rect：

  1. 裁切成獨立圖片

  2. 或在 Canvas 中單獨 render

  3. 一個 rect = 一個 viewport

你會得到幾個好處：

✅ 天然支援瀑布流：使用者只需要滑，不需要縮放。

✅ 對不同螢幕尺寸友善Canvas：可以等比縮放到全寬。

✅ 分鏡順序錯一點也沒關係：因為使用者是「連續閱讀」，不是在解析作者構圖。

✅ 非常適合手機：這點真的差很多。

這套方法有一個很重要的前提：

我們只試圖改善呈現方式。

所以它：

❌ 不用深度學習

❌ 不用標註資料

❌ 不追求 100% 正確分鏡語法

✅ 快

✅ 可解釋

✅ 前端即可跑

對很多產品來說，這其實是更好的工程解法。

很多人一提到「漫畫分析」，就直覺想到 AI / Model / Training。

但實際上，只要簡單的影像處理就能作到90分，讓手機看漫畫更舒服。

這就是低科技，窮人的 AI 應用 ><

(試試看)



標籤：

留言

張貼留言

這個網誌中的熱門文章

KillSudoku 4顆星精彩數獨詳解 - 鍊技巧

這題數獨(sudoku)題目估計為4+顆星，有點難度。解題需要應用多種技巧，過程非常精彩有趣，是個好題。 底下使用 KillSudoku 作詳細圖解。 １，使用基本排除法則，可以簡單填入６個數字。到此為止，開始使用 候選數法 來解題。如下所示，為填入６個數字後的狀態圖。 ２，如下圖，使用進階排除法，在第９列和第４行可以先排除幾個候選數。 ３，如圖，在第２行有一個 Naked Subset (3,4)，可以對3,4候選數作排除。附帶提一下，反過來看在同一行裡面也可以說有另一個Hidden Subset(2,5,8)存在。Naked Subset和Hidden Subset常是一體二面同時存在，只不過對我們來說，Naked Subset是相對比較容易看的出來。 排除第２行的3,4後，又可以對第２列以外的3作排除，如下圖。 ４，接著，在第５行又發現了一個 Naked Subset (3,7,8)。 對第５行三個Subset以外的候選數3,7,8作排除後，又接著產生可以對第５行以外的3作排除。 ５，這一題解到此為止，開始進入高潮。大部份能解到3顆星題目的人，猜想應該就此卡住。以下開始需要應用更高級的鍊技巧，才能夠繼續進行。 應用X-Chains鍊技巧，可以找到一條由４條強連結組成的鍊，可以排除候選數2。這裡的鍊指的是由２條以上的強連結組成，而所謂的強連結是指在同一行、或同一列或同一個Box裡，由唯二的候選數構成的連結。如上圖中的第９行中，只有二個2，這二個2構成一條強連結。為什麼說這是一條強連結？因為在這條連結的AB二個端點中，肯定會有一個2存在，要麼是A點要麼是B點。鍊技巧就是將多條強連結串連起來作候選數排除的技巧，而X-Chains是高級的鍊技巧裡面的基本技巧。 接上圖，這樣一來就又可以應用基本排除方法，填入３個數字，如下圖所示。 ６，接下來就是本題最精彩的部份，以下需要連續找到３條鍊，才能繼續往下解。 ７，找出３條鍊後，剩下來的部份就沒什麼特別的了，只需要應用基本法就能把所有剩餘數字填完。
張貼留言
Read more »

單人撲克牌遊戲 - 蒙地卡羅

更多可在網頁玩的 單人撲克牌遊戲 ； 新增一個簡單的單人撲克牌遊戲： 蒙地卡羅 ，簡單介紹一下玩法。 下載 事先排列好5x5張牌。 每次移動一張可以配對的牌，並消除這對牌。在上下、左右及斜向相隣的二張牌，只要擁有同樣數字(不計花色)，即可配對。 消除二張配對的牌後，剩餘的牌以往左往上的方式補滿空隙，接著在發新牌補滿後面的空格。 重覆步驟2~3，直到沒有牌可以配對及發完所有牌為止。 結果有二種。一個是勝利，成功的消除掉所有牌。另一個是Gameover沒有牌可以再作配對。
張貼留言
Read more »