iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

如何開發適合電子書閱讀器使用的瀏覽器 Android APP系列 第 16

電子書閱讀器上的瀏覽器 [Day16] 網頁匯出成 epub 檔案 (II)

在前一篇提到,可以利用 epublib 將網頁內容儲存成 epub 檔案,便於事後用其他的閱讀軟體中操作。不過,前一篇還只能將網頁中的文字部分儲存下來。今天要來說說,怎麼實作儲存圖片的方式,和使用者體驗改善。

如何實作儲存圖片

https://ithelp.ithome.com.tw/upload/images/20210913/20140260Lcnr7Tof0S.png

在一般網頁內容中,圖片的網址是來自於網路上的某個路徑;當要將網頁內容存進 epub 時,這些圖片的來源必須改成一個參考值 (reference),然後在 epublib 中加入新的 Resource,把參考值和實際的 image binary content 連結在一起。所以,在儲存 epub 時,先用 jsoup 將網頁內容中的所有圖片的元件找出來,把它們的 src 改成特定的參考值;將這些參考值和真正的網址存進一個 map。然後呼叫 saveImageResources() 函式,把 map 中的所有圖片都下載下來,一一加入 epub Book 中。

https://ithelp.ithome.com.tw/upload/images/20210913/201402603gBgf1v3N7.png
(60 行:處理網頁圖片內容;64行:儲存圖片至 epub 中)

https://ithelp.ithome.com.tw/upload/images/20210913/20140260D9ToJxRh41.png
(處理網頁內容,將 img 的 src 換成特定參考值,並傳出map)

https://ithelp.ithome.com.tw/upload/images/20210913/201402605lMHrKFxmR.png
(99行:利用 epublib 儲存圖片;103行:從網路下載圖片)

上圖中的 99 行很重要,最後面帶入的 MediatypeService.JPG 一定要加上才行。不然在儲存到既有的 epub 時,會發生之前儲存好的圖片會消失不見。應該是因為在讀取既有的 epub 時,因為事前沒有給予正確的 mimeType 值,造成它無法順利地讀取出來,也就無法在第二次寫入時,再完整地寫進同個 epub 文件中。

下載圖片的小枚角

上圖中的 getResourceFromUrl 看似簡單,但有時候卻會發生,明明 browser 中看得到圖片,可是轉到 epub 時,這些圖片依然沒有被正常的寫入。後來再追查了一下,有兩個地方可能會出錯。一個是需要加入 User-Agent 的 header,避免有些網站會擋掉沒有帶正常值的 request;第二點是有些圖片的網址可能原本是 http 型式,在 connection 回來時,可能不會立即回傳 binary data,而是回傳 responseCode 301 (redirect) ,要你重新去試一下 https 的網址拿資料。在這情況下如果沒有從 response header 中去抓出 Location 值重新要一次資料的話,就會無法正確地取回圖片。
以下是再更改過的抓圖實作。這次,應該真的處理了大部分 fail cases 了吧。

https://ithelp.ithome.com.tw/upload/images/20210913/20140260LUrDAc5Y1k.png

自動抓取 Reader Mode 的網頁內容再儲存至 epub

大部分的網頁充滿著各式各樣的元件,不是很適合當成電子書閱讀。原先的版本需要使用者自己手動切換到 Reader Mode 後再儲存成 epub 文件才會有比較好的效果。這動作做多了,就覺得很煩。所以在今天的實作中,把它改成自動的了。為了要達到這功能,必須修改原先寫好的 MozReadability.js

原先的 javasctipt 在最後段會透過 Readability 產生處理好的 article,再將 article 轉換成 html 塞到原本的網頁中。但是這步驟對於儲存 epub 來說是不必要的。

https://ithelp.ithome.com.tw/upload/images/20210913/20140260Xvc1P0S0jb.png

所以這一段被獨立了出來,只有在需要將現有網頁轉成 Reader Mode 時才注入。但是在儲存 epub 時,會利用下面的方式得到 Readability 處理好的 html 內容:

https://ithelp.ithome.com.tw/upload/images/20210913/20140260iErWnBEqqM.png

參考原始碼連結:

v8.7.0 https://github.com/plateaukao/browser/releases/tag/v8.7.0


上一篇
電子書閱讀器上的瀏覽器 [Day15] 網頁匯出成 epub 檔案 (I)
下一篇
電子書閱讀器上的瀏覽器 [Day17] 利用 Room 強化書籤功能
系列文
如何開發適合電子書閱讀器使用的瀏覽器 Android APP30

尚未有邦友留言

立即登入留言