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



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

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

首先,有 Book.coverUrl(( 方法。

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

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

以上是行不通的。urlundefined.

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

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 秒但不返回任何内容。这可能是 webpack-dev-server 到 200 的一个怪癖,但如果我在 Chrome 开发工具中浏览源代码,我也没有看到任何迹象表明这样的 URL 应该解析。

所以,文档没有帮助。我在谷歌上搜索并找到了 2015 年的这个 github 问题。他们的代码就像

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

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

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

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

编辑:我可能需要首先在book.cover提供的网址上使用Book.load。我这样做并试图安慰.log它,但它是一个庞大的博客,其中包含奇怪的编码文本,看起来像:

����

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

编辑2:那个大的斑点是类型:字符串,我无法atob()btoa()它。

EDIT3:只需fetchthis.book.cover提供的 url 返回我的索引.html,当它不知道还能做什么时,webpack-dev-server 的默认行为。

编辑4:以下是从epubbook.coverUrl的代码.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,看看会发生什么。

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

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

为此,请克隆整个 epub.js 项目。将该项目package.json中的依赖项复制到您自己的依赖项。然后,获取srcliblibs文件夹,并将它们复制到项目中的某个位置。找到一种方法来禁用您放置这些文件夹的位置的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;
});
})

最新更新