( 試試看 ) 在手機上看漫畫時,有一個體驗上的問題: 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大,更直覺的做法是: 直接把一頁漫畫自動切成多個分鏡,轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式: 使用 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...
改成再點一下左鍵就取消輸入, 這樣在touch device上也能取消
回覆刪除新增了 W-Wings
回覆刪除新增了分享功能...
回覆刪除你好~
回覆刪除我在輸入某一題數獨時發現大大提供的數獨解答器沒辦法算出答案
多試了網路上的一些解答器發現都可以算出答案...
想請問一下這大概是什麼原因造成的呢?
你好,
回覆刪除這是因為網路上找到的大多數解答器都是使用暴力方法窮舉出答案,除非輸入的答案無解,否則都是可以得到答案。而KillSudoku是模擬人類思維方法來解題,所以才能一步一步列出解題過程。也因為如此,假如KillSudoku模擬的功力不夠高的話就無法解出更難的題目,就像你遇到的情況一樣...目前KillSudosu只會解中高級的題目,太難的題目它不會解。等到我也會解了,就可以讓它也用同樣的方法來解...
有興趣的人可以在這裡下載 source code http://sourceforge.net/projects/html5killsudoku/
回覆刪除