Click here to Skip to main content
Click here to Skip to main content

Embedded HTML Help File with Images

By , 20 May 2010
Rate this:
Please Sign up or sign in to vote.
The web is full of questions like:
 
How do I embed and view a single HTML file which contains images?
 

First - what does this mean ? An embedded html file is one which is built into your program and is not an external file. It is normal for program help to be stored in an external .html, .chm or .hlp file. The instant your program has multiple files (executable plus help files), it encourages the author to create some kind of installation process. Under windows you create a .msi or installer. Under unix you make a tar ball. The next problem with a multi-file program is if you want to move the program around or share with a friend, you have to remember to copy all the files and place them in the correct location.

To avoid this mess, I discovered how to embed html help files and have images in my html. The embedded images are my contribution. So the answer to the original question is answered in two parts (for C#):
 

 
    • The .NET webbrowser component supports a data stream which can be an internal embedded resource.
      // Attach the embedded html resource
      Assembly a = Assembly.GetExecutingAssembly();
      Stream htmlStream = a.GetManifestResourceStream("ColorMatrix_ns.colormatrix.html");
      this.webBrowser.DocumentStream = htmlStream;
      
    • HTML supports inline base64 encoded images.
       
      <img src="data:image/jpg;base64,......." alt="image.jpg" />
      
To produce embedded HTML file in projects, I downloaded a base64 encoder and convert all of my images. There are tons of base64 utilities on the web. I used the following one:

http://www.f2ko.de/English/b64/index.php
 

I then searched and replaced all of the original image tags which looked something like:

 <img src="image.jpg" alt="image.jpg" />

With the following, where the ...... is the base64 image text.
 
 <img src="data:image/jpg;base64,......." alt="image.jpg" />

I don't know how important it is to include the /jpg or what every type of your original image is.
 
 <img src="data:image/jpg;base64,......." alt="image.jpg" />
The reason I says this is I often used the wrong type for my encoded images and the image still displayed.

The base64 image is a text file which you can open with your favorite text editor and paste into your HTML file. Here is a sample of a few lines of a base64 encoded image:
 
2VDDoOw/Kuk8N2zqVncbUHTPU1zXh+y+0TZIG1ecGu1jbyolTOSOpFTgadTHVVia/TY48ZKnhIOh
S6l9pqheb3qo83vUTTV9CeKeiNNULze9VGm96haagC281cL8RrL+0LeLzEV4cFWBGea6l5veqlwE
mjZJBlGGCKAPCD4UtoZCYowvsK4L4zWyafa6DEgw8pnZvw2AV9IX3h5JCTBNt9mH9a+df2hoJLXX
dItZCG8uNyCOhBI/wqJbo3pWcZ37fqjy+2UmQ4qWMsrOKm06ImbHrVt7M+Y5AqzAyRK/lsM9DVhL
uRI4zk8VLFZkhxipGsW+y9OlAHf/AA68u6sVmkbJW5miK+zpEc/+Q67LSUuGlZJ9oAbAKg1wvwrt
 
The base64 can be spread across multiple lines, as in the example above. The exception is if you add a base64 encoded image to a style sheet. Inside a style sheet, you must remove the line breaks in your base64 image and produce a single super long line.

For more examples, look at my colormatrix.html file which is part of the Color Matrix project.

WARNING - Your embedded base64 images have to be smallish. I ran into problems with large images not displaying or getting cut in half. I had to reduce the image complexity and shrink its size before encoding to produce a smaller data payload. I could not find the webbrowser base64 maximum length, so you will have to experiment.

Being a Tip the above is very light on details. If you want to see a working example please download my
Color Matrix Image Drawing Effects
project and look at the colormatrix.html file.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dennis Lang
Software Developer (Senior) WSI
United States United States
30 years experience writing software.
I love C/C++ for its speed and power and C#/Visual Studio for quick application development.
 
Unix/Linux is my favorite OS

Comments and Discussions

 
Questiontnx PinmemberMember 103310005-Apr-14 20:07 
QuestionOnline tool PinmemberIsim Elek27-Feb-14 9:30 
GeneralMaximum size of embedded image PinmemberM. Faisal Imam10-Jun-11 20:22 
GeneralRe: Maximum size of embedded image PinmemberDennis Lang24-Jun-11 14:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 20 May 2010
Article Copyright 2010 by Dennis Lang
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid