Como posso implementar um leitor de EPUB em JavaScript?

6

Gostaria de saber se posso criar um leitor de EPUB (padrão de livro aberto e gratuito) em JavaScript. Os requisitos básicos seriam:

  1. Partes do servidor do leitor EPUB a partir de uma API do servidor.
  2. Leia os dados do EPUB em JavaScript.
  3. Renderize-o na página.
  4. Forneça algumas funcionalidades extras, como realces de texto ou anotações da página.

Não tenho informações sobre como eu poderia fazer isso. Estou disposto a tentar um projeto de protótipo. Quais são os passos que eu poderia tomar para implementar uma coisa dessas?

Vlad Nicula
fonte
@FlorianMargaine obrigado pelos links, eu vi esses dois exemplos há um tempo. Eu sinto que o código desses projetos está no modo de protótipo agora, então tentar fazer engenharia reversa seria muito difícil. Estou procurando algumas dicas sobre como analisar o conteúdo do EPUB e renderizá-lo na página. Detalhes ou links específicos para onde eu poderia encontrar uma documentação fácil de seguir sobre como é o conteúdo do epub e como eu o renderizaria na página.
91312 Vlad Nicula

Respostas:

9

Pelos seus comentários, parece que você está em um estágio conceitual muito inicial e deseja orientação geral ... bem, isso será muito difícil de fornecer, pois o tópico inteiro é bastante amplo. Mas, em geral, o que você quer fazer é:

  1. Leia e analise um arquivo epub usando javascript.
  2. Gere HTML que representa o conteúdo (e imagens embutidas / SVG / etc).

Bem, isso está em um nível muito alto e não nos ajuda muito. Você pode dividir a etapa 1 lendo o próprio formato epub (por exemplo: artigo da wikipedia e informações gerais) Muito rapidamente, você deve observar que o formato usa o OCF para empacotar vários arquivos, portanto, seu primeiro problema será criar um leitor de OCF, o que também significa que você precisará descompactar os dados em javascript (os links de Florian Margaine devem você terá uma idéia de como os outros resolveram esse problema). Nesse ponto, eu começaria a procurar implementações existentes em javascript, porque você provavelmente não deseja implementar tudo isso desde o início. Isso é tudo antes mesmo de tocarmos no conteúdo real do arquivo epub. Depois de ultrapassar este ponto, você poderá ler o conteúdo real e tentar traduzi-lo para HTML.

Com relação à etapa 2, eu começava examinando os vários recursos fornecidos pelo epub - texto, estilo CSS, imagens incorporadas etc. - e começava a atacar aqueles um de cada vez, começando com o que desse mais retorno ao meu tempo (provavelmente texto ...)

Daniel B
fonte
Obrigado. Esse é o tipo de ponto de partida que eu estava procurando.
91312 Vlad Nicula
2
Eu ia responder, mas isso cobre principalmente. A única coisa que gostaria de acrescentar é o link para a especificação real do arquivo. idpf.org/epub
Rig
0

TreineticEpubReaderé um fork popular, readium-js-viewerpois fornece uma API muito simples para interagir com arquivos epub insira a descrição da imagem aqui, você pode carregar o epub como .epub ou servir o caminho da pasta extraída do epub

https://github.com/Treinetic/TreineticEpubReader

A biblioteca é javascript puro, para que você possa combinar com qualquer estrutura moderna. Aqui está um código de exemplo. Você também pode olhar para a samplepasta dentro da pasta distpara encontrar uma demonstração funcional

<div id="epub-reader-frame"></div>

var exControls = TreineticEpubReader.handler();
exControls.registerEvent("onEpubLoadSuccess", function () {

});

exControls.registerEvent("onEpubLoadFail", function () {

});

exControls.registerEvent("onTOCLoaded", function (hasTOC) {
    if (!hasTOC) {
       let toc =  exControls.getTOCJson();
    }
    // you can use following api calls after this
    /**
    exControls.hasNextPage()
    exControls.nextPage();
    exControls.hasPrevPage()
    exControls.prevPage();
    exControls.makeBookMark();
    exControls.changeFontSize(int);
    exControls.changeColumnMaxWidth(int);
    exControls.setTheme("theme-id-goes-here");
    exControls.setScrollMode("scroll-type-id-goes-here");
    exControls.setDisplayFormat("display-format-id-goes-here");

    extcontrols.getRecommendedFontSizeRange()
    extcontrols.getRecommendedColumnWidthRange()
    var list = extcontrols.getAvailableThemes();
    var list = extcontrols.getAvailableScrollModes();
    var list = extcontrols.getAvailableDisplayFormats();
    var settings = extcontrols.getCurrentReaderSettings();
    **/
});

var config = TreineticEpubReader.config();
config.jsLibRoot = "src/ZIPJS/";

TreineticEpubReader.create("#epub-reader-frame");
TreineticEpubReader.open("assets/epub/epub_1.epub");

imal hasaranga perera
fonte