javascript - 如何使用 epub.js 以 HTML 形式显示 epub 书籍的封面？

Question

我正在使用EPUB.js和 Vue 渲染 Epub。我想显示几本 epub 书籍的封面图像，以便用户可以单击其中一本书来查看整本书。

没有关于如何执行此操作的文档，但有几种方法表明这应该是可能的。

首先，有 Book.coverUrl() 方法。

请注意，我正在设置 img src属性等于 bookCoverSrc在 Vue 模板中。设置this.bookCoverSrc会自动更新src img的标记并导致显示图像(如果 src 有效/解析)。

this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
  this.book.coverUrl().then((url) => {
    this.bookCoverSrc = url;
  });
})

上面的方法不起作用。 url是 undefined 。

奇怪的是，似乎有一个 cover直接上属性book 。所以，我尝试:

this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
  this.coverSrc = this.book.cover;
});

this.book.cover解析为 OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb6b2beb8baac9fbcb0a9baadf1b5afb8" rel="noreferrer noopener nofollow">[email protected]</a> ，所以至少在本地当我将其设置为 src 时结果请求 http://localhost:8080/OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375e5a56505244775458415245195d4750" rel="noreferrer noopener nofollow">[email protected]</a> ，这 200s 但没有返回任何内容。可能是 webpack-dev-server 到 200 的一个怪癖，但是如果我在 Chrome 开发工具中翻阅源代码，我也没有看到任何指示应该解析这样的 URL。

所以，文档没有帮助。我用谷歌搜索并找到了这个github question from 2015.他们的代码就像

$("#cover").attr("src", Book.store.urlCache[Book.cover]);

有趣的是，码头上没有任何关于 Book.store.urlCache 的内容。正如预期的那样，urlCache是 undefined ，不过 book.store存在。不过，我没有看到任何可以帮助我显示封面图像的内容。

使用 epub.js，如何显示 Epub 文件的封面图像？ 请注意，简单地渲染 Epub 文件的第一个“页面”(通常是封面图像)不会'不能解决我的问题，因为我想列出几个 epub 文件的封面图片。

另请注意，我相信我正在使用的 epub 文件确实有封面图像。这些文件是Aesop's Fables和 Irish Wonders .

编辑:我可能需要使用 Book.load在 book.cover 提供的网址上第一的。我这样做了，并尝试控制台记录它，但这是一个巨大的博客，其中包含奇怪的编码文本，看起来像这样:

����

所以我认为这是一个直接的图像，我需要找到一种方法以某种方式将其添加到文档中？

编辑2:那个大 Blob 的类型是:字符串，我不能atob()或btoa()它。

编辑3:只是fetch ing this.book.cover 提供的 url返回我的index.html，这是 webpack-dev-server 在不知道还能做什么时的默认行为。

EDIT4:下面是 book.coverUrl 的代码来自 epub.js

    key: "coverUrl",
    value: function coverUrl() {
        var _this9 = this;

        var retrieved = this.loaded.cover.then(function (url) {
            if (_this9.archived) {
                // return this.archive.createUrl(this.cover);
                return _this9.resources.get(_this9.cover);
            } else {
                return _this9.cover;
            }
        });

        return retrieved;
    }

如果我使用this.archive.createUrl(this.cover)而不是this.resources.get ，我实际上得到了一个功能性 URL，看起来像 blob:http://localhost:8080/9a3447b7-5cc8-4cfd-8608-d963910cb5f5 。我会尝试将其放入 src看看会发生什么。

Answer 1

发生这种情况的原因是因为 coverUrl 函数中的功能代码行在源库 epub.js 中被注释掉，而编写了一行不起作用的代码。

因此，我必须复制整个库，取消注释好的代码并删除坏的代码。现在该函数可以正常工作了。

为此，请克隆整个 epub.js项目。将该项目的 package.json 中的依赖项复制到您自己的项目中。然后，将 src、lib 和 libs 文件夹复制到项目中的某个位置。找到一种方法来禁用这些文件夹所在位置的 eslint，因为该项目使用 TAB 字符作为间距，这导致我的终端因 ESLINT 爆炸而挂起。

npm install 这样您的 node_modules 中就有了 epub.js 依赖项。

打开book.js。取消注释第 661 行，它看起来像

      return this.archive.createUrl(this.cover);

并注释掉第 662 行，如下所示

      // return this.resources.get(this.cover);

现在，您可以通过将 img 标记的 src 属性设置为 book.coverUrl() 返回的 URL 来显示图像。

this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
  this.book.coverUrl().then((url) => {
    this.bookCoverSrc = url;
  });
})