如何使用epub.js在HTML中显示电子酒吧书籍的封面？

Question

我使用EPUB.js和Vue来呈现一个Epub。我想显示几本电子酒吧书籍的封面图片，这样用户就可以点击其中一本就可以看到整本书了。

没有关于如何做到这一点的文档，但是有几种方法表明这是可能的。

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

请注意，我在Vue模板中设置了一个img src属性，该属性等于bookCoverSrc。设置this.bookCoverSrc将自动更新img标记的src并导致图像显示(如果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@images@cover.jpg，因此，至少当我将其设置为src时，会产生对http://localhost:8080/OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@images@cover.jpg的请求，该请求200 s，但不返回任何内容。这可能是webpack开发服务器到200的一个怪癖，但是如果我在Chrome工具中浏览源代码，我也没有看到任何迹象表明这样的URL应该解决。

医生帮不上忙。我在谷歌上搜索并找到了这个github问题从2015年开始。，他们的代码就像

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

有趣的是，Book.store.urlCache在码头上什么都没有。正如预期的那样，urlCache是undefined，尽管book.store存在。但是我没有看到任何能帮助我显示封面图像的东西。

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

还请注意，我认为我使用的epub文件有封面图像。这些文件是伊索寓言和爱尔兰奇观。

编辑:我可能首先需要在book.cover提供的url上使用book.cover。我这样做了，并试图console.log它，但它是一个巨大的博客，奇怪编码的文本，看上去如下：

����

所以，我认为这是一个直接的图像，我需要找到一种方法，让它以某种方式进入文档？

EDIT2:那个大的blob是类型: string，我不能atob()或btoa()它。

EDIT3:只要对this.book.cover提供的url进行fetch处理，当它不知道还能做什么时，它就会返回my index.html，这是webpack开发服务器的默认行为。

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，因此您的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;
  });
})