Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

PDF to HTML5 conversion – Embed an image in HTML5 with Base64 encoding

1 min read

HTML5 can contain links to external images and other resources (which often makes the HTML5 page much faster to load because it is a small text file with links to the images, videos, or audio it needs). This work fine so long as you have network connectivity…

One of the big new features in HTML5 is the ability for the code to work without a network connection and to store data offline in a cache. Sometimes, however, this functionality is overkill and you can embed an image more simply by just inserting the data into the HTML5 file.

An image consists of binary data so it needs to be stored in a suitable format inside the text file. Base64 encoding (a simple algorithm which converts bytes into a block of what looks like text data) is ideal (this is what you often use in emails to add in binary content). So instead of the more usual HMTL5 format of

<img id="Im0" style="display: none;" src="img/1/Im0.png" 
alt="Im0" width="540" height="720" />

you would see

base64,iV...Big block of chars here...rDYgg=="
alt="Im0" width="540" height="720" />

If you want to have a try in our PDF5HTML5 convertor, there is a new flag to enable it in today’s release (it is commented out by default in ExtractPagesAsHTML.java example).

/**
 * embed image inside PDF as base64 encoded stream
 */HTMLoutput.setBooleanValue(HTMLDisplay.EmbedImageAsBase64Stream, true);

Of course once you start playing with images, you may want to have far more control on images and be able to control their exact size. Maybe you should read tomorrow’s blog article?

This post is part of our “HTML5 Article index” in these articles, we aim to help you understand the world of HTML5.

Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

Converting your PDF files to HTML5 with BuildVuĀ 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
3 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

How HTML5 Javadocs in Java 9 will make your…

Here at IDRsolutions we are very excited about Java 9 and have written a series of articles explaining some of the main features. In...
Rob
1 min read

2 Replies to “PDF to HTML5 conversion – Embed an image in…”

Leave a Reply

Your email address will not be published. Required fields are marked *