Wie kann ich einen EPUB-Reader in JavaScript implementieren?

Ich frage mich, ob ich einen EPUB -Reader (kostenloser und offener E-Book-Standard) in JavaScript erstellen kann . Die Grundvoraussetzungen wären:

1. Serverteile des EPUB-Readers über eine Server-API.
2. Lesen Sie die EPUB-Daten in JavaScript.
3. Rendern Sie es auf Seite.
4. Stellen Sie einige zusätzliche Funktionen bereit, z. B. Textmarkierungen oder Seitennotizen.

Ich habe keine Informationen darüber, wie ich das machen könnte. Ich bin bereit, ein Prototypprojekt auszuprobieren. Welche Schritte könnte ich unternehmen, um so etwas umzusetzen?

Aus Ihren Kommentaren geht hervor, dass Sie sich in einem sehr frühen konzeptionellen Stadium befinden und allgemeine Anleitungen wünschen. Nun, das wird sehr schwierig zu geben sein, da das gesamte Thema ziemlich umfangreich ist. Im Allgemeinen möchten Sie jedoch Folgendes tun:

1. Lesen Sie eine Epub-Datei ein und analysieren Sie sie mit Javascript.
2. Generieren Sie HTML, das den Inhalt darstellt (und Inline-Bilder / SVG / etc).

Nun, das ist auf einem sehr hohen Niveau und hilft uns nicht viel. Sie können Schritt 1 aufschlüsseln, indem Sie das Epub-Format selbst nachlesen (z. B. Wikipedia-Artikel und allgemeine Informationen)). Ziemlich schnell sollten Sie feststellen, dass das Format OCF verwendet, um mehrere Dateien zusammenzufassen. Ihr erstes Problem besteht darin, einen OCF-Reader zu erstellen. Dies bedeutet auch, dass Sie die Daten in Javascript entpacken müssen (die Links von Florian Margaine sollten dies tun) Geben Sie eine Vorstellung davon, wie andere dieses Problem gelöst haben. An diesem Punkt würde ich nach vorhandenen Implementierungen in Javascript suchen, da Sie dies wahrscheinlich nicht von Grund auf implementieren möchten. Dies ist alles, bevor wir überhaupt den eigentlichen Inhalt der Epub-Datei berühren. Sobald Sie diesen Punkt überschritten haben, sollten Sie in der Lage sein, den eigentlichen Inhalt einzulesen und zu versuchen, ihn in HTML zu übersetzen.

In Bezug auf Schritt 2 würde ich zunächst die verschiedenen Funktionen von epub betrachten - Text, CSS-Stil, eingebettete Bilder usw. - und diese nacheinander angreifen, beginnend mit dem, was für meine Zeit die größte Rendite bringt (wahrscheinlich Text) ...).

TreineticEpubReaderist ein beliebter Zweig, der readium-js-viewereine sehr einfache API für die Interaktion mit Epub-Dateien bietet. Sie können entweder den Epub als .epub laden oder den extrahierten Ordnerpfad des Epubs bereitstellen

https://github.com/Treinetic/TreineticEpubReader

Die Bibliothek ist reines Javascript, sodass Sie sie mit jedem modernen Framework mischen und mischen können. Hier ist ein Beispielcode. Sie können auch den sampleOrdner im Ordner durchsuchen dist, um eine funktionierende Demo zu finden

<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");