我如何使用epub.js在HTML中显示epub书的封面？

Question

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

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

首先，有Book.coverUrl（）方法。

注意，我要在Vue模板中将img src属性设置为等于bookCoverSrc。设置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@[email protected]，因此至少在本地，当我将其设置为src时，会导致对http://localhost:8080/OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@[email protected]的请求，该请求为200秒，但不返回任何内容。大概有200个webpack-dev-server的怪癖，但是如果我浏览Chrome开发工具中的源代码，我也看不到任何迹象表明可以解析这样的URL。

因此，文档无济于事。我用Google搜索并找到了此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提供的URL上使用book.cover。我这样做了，并尝试进行console.log记录，但这是一个庞大的博客，其中包含奇怪的编码文本，看起来像：

����

所以我认为这是一张直截了当的图片，我需要找到一种方法以某种方式将其添加到文档中？

EDIT2：那个大的blob类型为：字符串，但是我不能atob()或btoa()。

EDIT3：仅fetch输入this.book.cover提供的URL即可返回我的index.html，这是webpack-dev-server的默认行为，不知道该怎么做。

EDIT4：以下是epub.js中book.coverUrl的代码

    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，因此您的epub.js中有您和node_modules的依赖项。

打开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;
  });
})