如何使用 epub.js 在 HTML 中显示 epub 图书的封面?
How do I display in HTML the cover of an epub book using epub.js?
我正在使用 EPUB.js 和 Vue 来呈现 Epub。我想显示几本 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
。
奇怪的是,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 秒但 returns 没有内容。可能是 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文件的封面图片?请注意,只需渲染第一个"page"的Epub文件(通常是封面图片)不能解决我的问题,因为我想列出几个 epub 文件的封面图片。
另请注意,我相信我使用的 epub 文件确实有封面图片。这些文件是 Aesop's Fables and Irish Wonders.
编辑:我可能需要先在 book.cover
提供的 url 上使用 Book.load。我这样做并尝试 console.log 它,但它是一个巨大的博客,包含奇怪编码的文本,看起来像:
����
所以我认为这是一个直接的图像,我需要找到一种方法以某种方式将其添加到文档中吗?
EDIT2:那个大的 blobby blob 是类型:字符串,我不能 atob()
或 btoa()
它。
EDIT3:只需 fetch
ing 由 this.book.cover
returns 我的 index.html 提供的 url,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
中,看看会发生什么。
我之所以会出现这种情况,是因为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;
});
})
我正在使用 EPUB.js 和 Vue 来呈现 Epub。我想显示几本 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
。
奇怪的是,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 秒但 returns 没有内容。可能是 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文件的封面图片?请注意,只需渲染第一个"page"的Epub文件(通常是封面图片)不能解决我的问题,因为我想列出几个 epub 文件的封面图片。
另请注意,我相信我使用的 epub 文件确实有封面图片。这些文件是 Aesop's Fables and Irish Wonders.
编辑:我可能需要先在 book.cover
提供的 url 上使用 Book.load。我这样做并尝试 console.log 它,但它是一个巨大的博客,包含奇怪编码的文本,看起来像:
����
所以我认为这是一个直接的图像,我需要找到一种方法以某种方式将其添加到文档中吗?
EDIT2:那个大的 blobby blob 是类型:字符串,我不能 atob()
或 btoa()
它。
EDIT3:只需 fetch
ing 由 this.book.cover
returns 我的 index.html 提供的 url,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
中,看看会发生什么。
我之所以会出现这种情况,是因为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;
});
})