In order to create a self-contained web page that has no external links, it is easy to place all JavaScript and CSS elements in the page. However, adding an image is not straightforward. This procedure will enable you to convert an image to Base64 and embed the image in the page source. We will assume you are using a Windows computer since we are using a Windows system utility. However, the same principle applies to Linux, etc.
In this example, we are going to create a button with a PNG image for the button face.
Procedure
- Move the image file (i.e. AttachDocument.png) to a known folder.
- Launch a command line prompt and navigate to the folder.
- Create the Base64 encoded representation of the image.
certutil -encode AttachDocument.png AttachmentDocument.txt
- Open the generated file (AttachmentDocument.txt) and remove the first and last line to remove non-Base64 text. This is required because the certificate utility application adds additional information to the beginning and end of the file. We are using it for a different purpose than it was intended to be used for.
Initial view of generated file before edits:
Initial view of generated file before edits:
-----BEGIN CERTIFICATE----- iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xh BQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA BmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAgElEQVQ4y2Ng oBAw4pJQVFRcwcDAII5H78v79+9HsOBRIP7z588QXJLs7OxrGBgYGJgo9QIL1LkP GBgY5LHY8gbKfPjz509jnAYwMDDI//37VwqXLczMzM9wyVHshVEDELFAEMASDhJ4 SZIB9+/fd6SpFx7iSywMDAwPKbUIJwAAi1ca+TMtY2gAAAAldEVYdGRhdGU6Y3Jl YXRlADIwMjAtMDctMjlUMDI6Mjk6NTgrMDA6MDDwzxTjAAAAJXRFWHRkYXRlOm1v ZGlmeQAyMDIwLTA3LTI5VDAyOjI5OjU4KzAwOjAwgZKsXwAAAABJRU5ErkJggg== -----END CERTIFICATE-----