Can a .BMP file be stored in an HTA (HTML/VBScript)?

Question

I've noticed in a backup of my FireFox bookmarks that the icon which is displayed to the left of each entry is held as a character stream in the A tags. For example:

ICON="data:image/png;base64,iVBOR [data removed to shorten example] rkJggg=="

I have 3 BMP files (2 are 4x20 (249 bytes) and 1 is 102x82 (24.7 KB)) that I would like to hide within my HTML Application so they don't get lost.

The larger one appears 3 times in the style tag as follows (1 occurrence shown):

<style type="text/css">
#frmMainBody
  {background:grey; background-image:url('Background.bmp'); margin:0;
   padding:0; font:normal 10pt Microsoft Sans Serif;}
</style>

The other two appear in a VBScript subroutines as follows:

Sub Button_Glow
  ' Highlights a button when the cursor hovers over it.

  With Window.Event.srcElement.Style
    If .BackgroundColor <> "Lavender" Then
      .BackgroundColor = "Lavender"
      .BackgroundImage = "url(Glow.bmp)"
      .BackgroundPositionY = -2
      .BackgroundRepeat = "Repeat-X"
    End If
  End With

End Sub 'Button_Glow

Is this possible ?

Placer

Yes, but I would convert to PNG first. In either case this will convert the image to a data uri for CSS/HTML; webcodertools.com/imagetobase64converter – Quidnunc

Alex, what changes would I have to make to my code? – Placer

Use that online tool; it will generate a big url(data:XXX) string, just replace url('Background.bmp') with it – Quidnunc

The HTA I am testing this with has gone from 84KB to 183KB after only replacing the Background.bmp file. It takes longer to load and the screen background doesn't look as good as before. So, it is possible but I don't think that I'll use it. – Placer

Try with a PNG instead – Quidnunc

Your image format won't help much. Base64 uses 6 bits per byte to encode data, whereas binary uses 8 bits per byte, and that's not including the 814 bytes overhead for the header. Check out en.wikipedia.org/wiki/Base64#MIME for some juicy details. – Famished

It is usually a bad idea to store anything bigger than a few kb (one digit, that is) in the main CSS file: download takes a lot longer and therefor the CSS rules won't apply before the complete file is downloaded and interpreted. You should at least put the images in dedicated CSS files. In general, I ask myself what you mean by "so they don't get lost". Most SCM tools have the capability of storing binary data. – Unwelcome

Answer 1

HTA is a plain text editable markup language which you can open and edit with any plain text editor such as Notepad++.

You CAN store ANY image format in HTML, CSS, etc by converting the image to base64, then in place of

<img src="mypath/myimage.bmp" />

<style type="text/css">
foo { background: url(mypath/myimage.bmp); }
</style>

You would put ::

<img src="data:image/x-png;base64,iVBORw0KGgoAAAANS....." />

<style type="text/css">
foo { background: url(data:image/x-png;base64,iVBORw0KGgoAAAANS.....); }
</style>

To make this even easier for you, you can convert the image into this format using an online tool such as the one located here >> Convert any Image into a Base64 string << .

HOW TO APPLY THIS TO THE CODE IN YOUR QUESTION

Using one of the tools (or writing your own), locate and convert 'Background.bmp' to base64, then modify the first block of code your posted like this (also shortened to save space)

<style type="text/css">
#frmMainBody
  {background:grey; background-image:url(data:image/x-png;base64,iVBORw0KGgoAAAANS....); margin:0;
   padding:0; font:normal 10pt Microsoft Sans Serif;}
</style>

Next, for the VBScript code, locate and convert 'Glow.bmp' (same as you did for 'Background.bmp' above), and modify the block of code so it looks like this

Sub Button_Glow
  ' Highlights a button when the cursor hovers over it.

  With Window.Event.srcElement.Style
    If .BackgroundColor <> "Lavender" Then
      .BackgroundColor = "Lavender"
      .BackgroundImage = "data:image/x-png;base64,iVBORw0KGgoAAAANS....."
      .BackgroundPositionY = -2
      .BackgroundRepeat = "Repeat-X"
    End If
  End With

End Sub

Enciso

There are also extensions available for FireFox ( imagetobase64converter ), and Chrome ( Base64 Image Encoder ). – Enciso

Additionally, there are tools you can download for encoding at the OS level (rather than web or browser extension based) such as base64 Command Line or Binary to Base64 Translator for MAC and Windows – Enciso

Or you can do it within VBScript. – Bolshevik

Note: This answer refers to .bmp files yet uses image/x-png encoding (which typically has the .png extension) in its data schemas. – Zoophobia

Answer 2

The image on the left side is called favicon and its default size is 16x16 and it should be in .ICO format (but it can also be in other).

When you wrote about hiding a .BMP image, I guess you wanted to store and not hide the favicon, so it would always load, even if the bookmarks/user is offline. Right?

Stefan

Answer 3

I am not good with vb, but you can encode a file or image to base64 (in PHP with base64_encode() function) there should be a function in vb for that. All you have to do is just save the content or strings in the image file(e.g XXXXXX.png ) as a variabe and pass it into the base64 encode function.

You can also use this method to save images directly into database ( I guess... ) but you will have to decode the string so as to make the image appear.( Assuming you are doing this. ) - Don't try this at home. it might kill your cat and burn your house :/

Fusco

Answer 4

This may help - a HTA that uses VBScript to encode the image file as base64 (with code adapted from Base64 Encode String in VBScript and VBScript to open a dialog to select a filepath).

You can generate the base64 code and use it as the source of an image, eg:

<img src="data:image/png;base64, [base64 code inserted here] ">

<!DOCTYPE html>
<html>
<head>
 <HTA:APPLICATION
    ID="oHta"
    APPLICATIONNAME="Base64 Encode"
    ICON="favicon.ico"
 />
<LINK id=shortcutlink REL="SHORTCUT ICON" HREF="favicon.ico">
<META http-equiv="x-ua-compatible" content="text/html; charset=utf-8">
<TITLE>Base64 Encoder</TITLE>
</head>

<script language=vbscript>

Function fBase64Encode(sourceStr)

    Dim rarr()

    carr = Array(   "A", "B", "C", "D", "E", "F", "G", "H", _
                    "I", "J", "K", "L", "M", "N", "O" ,"P", _
                    "Q", "R", "S", "T", "U", "V", "W", "X", _
                    "Y", "Z", "a", "b", "c", "d", "e", "f", _
                    "g", "h", "i", "j", "k", "l", "m", "n", _
                    "o", "p", "q", "r", "s", "t", "u", "v", _
                    "w", "x", "y", "z", "0", "1", "2", "3", _
                    "4", "5", "6", "7", "8", "9", "+", "/")     

    n = Len(sourceStr)-1

    ReDim rarr(n\3)

    For i=0 To n Step 3
        a = Asc(Mid(sourceStr,i+1,1))
        If i < n Then
            b = Asc(Mid(sourceStr,i+2,1))
        Else
            b = 0
        End If
        If i < n-1 Then
            c = Asc(Mid(sourceStr,i+3,1))
        Else
            c = 0
        End If
        rarr(i\3) = carr(a\4) & carr((a And 3) * 16 + b\16) & carr((b And 15) * 4 + c\64) & carr(c And 63)
    Next

    i = UBound(rarr)
    If n Mod 3 = 0 Then
        rarr(i) = Left(rarr(i),2) & "=="
    ElseIf n Mod 3 = 1 Then
        rarr(i) = Left(rarr(i),3) & "="
    End If

    fBase64Encode = Join(rarr,"")

End Function
'-------------------------------------------------------------------------------

function fBase64Decode(str)

    fBase64Decode = ""

    table = fGenerateBase64Table

    bits = 0

    for x = 1 to len(str) step 1
        c = table(1+asc(mid(str,x,1)))
        if (c <> -1) then
            if (bits = 0) then
                outword = c*4
                bits = 6
            elseif (bits = 2) then
                outword = c+outword
                strBase64 = strBase64 & chr(clng("&H" & hex(outword mod 256)))
                bits = 0
            elseif (bits = 4) then
                outword = outword + int(c/4)
                strBase64 = strBase64 & chr(clng("&H" & hex(outword mod 256)))
                outword = c*64
                bits = 2
            else
                outword = outword + int(c/16)
                strBase64 = strBase64 & chr(clng("&H" & hex(outword mod 256)))
                outword = c*16
                bits = 4
            end if
        end if
    next

    fBase64Decode = strBase64

end function
'---------------------------------------------------

function fGenerateBase64Table()

    r64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"

    'set up decode table
    dim table(256)
    for x = 1 to 256 step 1
        table(x) = -1
    next
    for x = 1 to 64 step 1
        table(1+asc(mid(r64,x,1))) = x - 1
    next

    fGenerateBase64Table = table

end function
'---------------------------------------------------

function fSelectFile()

    fSelectFile = ""
    strMSHTA = "mshta.exe ""about:<input type=file id=FILE>" & _
               "<"&"script>FILE.click();new ActiveXObject('Scripting.FileSystemObject')" & _
               ".GetStandardStream(1).WriteLine(FILE.value);close();resizeTo(0,0);<"&"/script>"""

    Set wshShell = CreateObject( "WScript.Shell" )
    Set objExec = wshShell.Exec( strMSHTA )
    fSelectFile = objExec.StdOut.ReadLine( )
    Set objExec = Nothing
    Set wshShell = Nothing

end function

'-------------------------------------------------------------------------

sub getBase64()

    'this can be BMP, PNG, ICO
    REM sImgFile = "favicon.ico"
    sImgFile = fSelectFile()

    if sImgFile = "" then exit sub

    Set fso = CreateObject("Scripting.FileSystemObject")
    Set f = fso.GetFile(sImgFile)
    filesize = f.size
    set f = fso.opentextfile(sImgFile,1,0) 'open as ascii
    strBinFile = f.read(filesize)
    f.close
    set fso = nothing

    strPNGFile = fBase64Encode(strBinFile)
    s = s & "Base64 encoding of "&sImgFile&"<br><br>" & strPNGFile & "<br><br>"
    s = s & "<img src=""data:image/bmp;base64," & strPNGFile & """><br><br>" & vbcrlf

    imgbase64.innerhtml = s

end sub
'-------------------------------------------------------------------------

</script>

<style type="text/css">

    body  {font-family:"CONSOLAS";font-size:"10pt";}
    input  {font-family:"CONSOLAS";font-size:"8pt";}

</style>

<body>

<input type=button value="Encode an image file..." 
data-tooltip title="Choose a PNG, BMP, ICO file to encode in base64" 
onclick=getBase64>

<br><br>

<div id=imgbase64 style="word-wrap: break-word;"></div>

</body>
</html>

Lilliamlillian