电子书阅读器上的浏览器 [Day16] 网页汇出成 epub 档案 (II)

在前一篇提到，可以利用 epublib 将网页内容储存成 epub 档案，便於事後用其他的阅读软件中操作。不过，前一篇还只能将网页中的文字部分储存下来。今天要来说说，怎麽实作储存图片的方式，和使用者体验改善。

如何实作储存图片

在一般网页内容中，图片的网址是来自於网路上的某个路径；当要将网页内容存进 epub 时，这些图片的来源必须改成一个参考值 (reference)，然後在 epublib 中加入新的 Resource，把参考值和实际的 image binary content 连结在一起。所以，在储存 epub 时，先用 jsoup 将网页内容中的所有图片的元件找出来，把它们的 src 改成特定的参考值；将这些参考值和真正的网址存进一个 map。然後呼叫 saveImageResources() 函式，把 map 中的所有图片都下载下来，一一加入 epub Book 中。

(60 行：处理网页图片内容；64行：储存图片至 epub 中)

(处理网页内容，将 img 的 src 换成特定参考值，并传出map)

(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 了吧。

自动抓取 Reader Mode 的网页内容再储存至 epub

大部分的网页充满着各式各样的元件，不是很适合当成电子书阅读。原先的版本需要使用者自己手动切换到 Reader Mode 後再储存成 epub 文件才会有比较好的效果。这动作做多了，就觉得很烦。所以在今天的实作中，把它改成自动的了。为了要达到这功能，必须修改原先写好的 MozReadability.js 。

原先的 javasctipt 在最後段会透过 Readability 产生处理好的 article，再将 article 转换成 html 塞到原本的网页中。但是这步骤对於储存 epub 来说是不必要的。