android epublib access css,images,urls inner files

Question

I want to use epub book in my application. I found this link http://www.siegmann.nl/epublib/android to open my epub book.

I understand how to show the text from the epub book,

but I have a problem with images,CSS files, and links. Their URL are to assets folder, for example:

file:///android_asset/index_split_000.html#back_note_1 File:///android_asset/images/image-1.jpeg

And in the assets folder there isn't HTML page like this and there isn't image folder, there is only the epub zipped file.

How can I use all the inner files?

My code:

WebView webView=(WebView) findViewById(webView);
List<Chapter> chapters=new ArrayList<Chapter>();
AssetManager assetManager = getAssets();
    try{   
        //find input Stream for book
        InputStream epubInputStream = assetManager.open("xxxxx.epub");
        //Load book from input stream
        book = (new EpubReader()).readEpub(epubInputStream);

       //Log the book's cover image property
        Bitmap coverImage =     BitmapFactory.decodeStream(book.getCoverImage().getInputStream());
        //Log.i("epublib", "CoverImage is" + coverImage.getWidth()+" by "+coverImage.getHeight()+" pixels");

        //Log the tables of contents
        logTableOfContents(book.getTableOfContents().getTocReferences(),0);


    }
    catch(IOException e){
        Log.e("epublib", e.getMessage());
    }




private void logTableOfContents(List<TOCReference> tocReferences, int depth) {

    if (tocReferences == null) {

      return;

    }

    for (TOCReference tocReference : tocReferences) {

      StringBuilder tocString = new StringBuilder();



      try {
          Chapter chapter=new Chapter();

          String s=new String(tocReference.getResource().getData());
          chapter.setTitle(tocReference.getTitle());
          chapter.setContent(s);
          chapters.add(chapter);
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

      logTableOfContents(tocReference.getChildren(), depth + 1);

    }

  }

chapter is my own class:

public class Chapter {

String title;
String content;

public Chapter(String titlt,String content) {
    this.title=titlt;
    this.content=content;
}

public Chapter() {
}

public String getTitle() {
    return title;
}
public String getContent() {
    return content;
}
public void setTitle(String title) {
    this.title = title;
}
public void setContent(String content) {
    this.content = content;
}

}

to load the data into webview:

 webView.loadDataWithBaseURL("file:///android_asset/",chapters.get(index).getContent(), "text/html", "utf-8", null);

Answer 1

A simple way consists in unzipping the EPUB file into a temporary directory, and then loading the XHTML files from there. In this way, the relative links to image files, CSS files, etc. present in each XHTML file will be resolved automatically by the WebView.

An example of this technique is here: https://github.com/pettarin/epub3reader

Of course, you can avoid unzipping the entire EPUB file, and just "read" one XHTML file into memory (RAM), but if you do so, you have to patch the XHTML source to be injected into the WebView, and/or manually manage the extraction of the images/CSS/etc. files referenced from the current XHTML. If you aim at "simple" EPUB files, the "just unzip in a tmp directory" approach is much easier.

Answer 2

Without unzipping the epub library.

All you need to do is get the bitmap images which you can do using the epublib very easily. I then saved these in a temporary folder and used string.replace in the html to make sure the html now pointed to the new temporary directory and not where the webview will have no idea where "/images" is.

Get all the bipmaps as resources

MediaType[] bitmapTypes = { MediatypeService.PNG, MediatypeService.GIF, MediatypeService.JPG };
List<Resource> bitmapResources = book.getResources().getResourcesByMediaTypes( bitmapTypes );

Loop through all the Bitmaps as resources:

    for(Resource r : bitmapResources) {
           Bitmap bm = BitmapFactory.decodeByteArray(r.getData(), 0, r.getData().length);
       // store in a public folder on android
     }

Replace the html in the webview, the "/images/" to "chosenfile/tempfolder" to point to the temporary file:

    String imagePath = "file://" + Environment.getExternalStorageDirectory().getAbsolutePath() + "/temp_images" + File.separator;
    text = text.replaceAll("images/", imagePath);
    webView.loadDataWithBaseURL("", text, "text/html", "UTF-8", "");