时间戳

首页 > 解决方案 > 如何使用 epub.js 在 HTML 中显示 epub 书籍的封面？

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

问题描述

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

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

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

请注意，我在 Vue 模板中设置了一个img src等于的属性。bookCoverSrc设置将this.bookCoverSrc自动更新标签并显示图像（如果有效/解析）。srcimgsrc

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，因此至少在本地将其设置为 asrc会导致请求http://localhost:8080/OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@images@cover.jpg200 秒但不返回任何内容。可能是 webpack-dev-server 到 200 的怪癖，但是如果我通过 Chrome 开发工具中的源进行分页，我也看不到任何表明这样的 URL 应该解析的迹象。

所以，文档没有帮助。我在 2015 年搜索并发现了这个github 问题。他们的代码就像

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

有趣的是，码头上没有关于 Book.store.urlCache 的内容。正如所料，urlCacheis undefined，虽然book.store存在。我在那里看不到任何可以帮助我显示封面图像的东西。

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

另请注意，我相信我使用的 epub 文件确实有封面图片。这些文件是伊索寓言和爱尔兰奇观。

编辑：我可能需要在首先提供的 url 上使用Book.loadbook.cover。我这样做并尝试对其进行控制台记录，但它是一个包含奇怪编码文本的大型博客，看起来像：

����

所以我认为这是一个直接的图像，我需要找到一种方法以某种方式将它放到 Document 上？

EDIT2：那个大斑点是类型：字符串，我不能atob()或者btoa()它。

EDIT3：只需返回我的 index.htmlfetch提供的 url this.book.cover，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，看看会发生什么。

标签： javascripthtmlepubepub.js

解决方案

这发生在我身上的原因是因为函数中的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().

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

推荐阅读