Today, I thought I’d share how you can save an image from an image displayed in the web browser control or retrieved through some other form of automation. The concept/code has actually been available via some of my demo databases, but I’ve never created a post on the subject.

This will be used in my next article, to come out later in the week, in which I will be showing you another cool thing that can now be done using the new Modern ‘Edge’ Web Browser control.
 

Base64 Images

It is important that we clear understand that this article is to save a copy of Base64 images and not those that provide a path and filename.  If you wish to download images where the source is a path and filename then we use an alternative approach, such as:

What I am referring to in this article are images that have a src attribute similar to:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8L8PwHgAFSQIMUBuc8AAAAABJRU5ErkJggg==" />

where the src is a string in base64 format, some long string of characters that look like gibberish.

Retrieving the SRC Value

As an aside, I thought I’d quickly give a couple examples of how you can retrieve the SRC attribute from a web browser control. There are other possible techniques.

In the following examples, let assume we have a webpage that contains an img element with the id of ‘photo’ and we wish to retrieve its src attribute.

The Older Web Browser Control

Dim sImgSRC              As String

oWebBrowserObject.Document.parentWindow.execScript ("var photoSrc = document.getElementById('photo').src;")
sImgSRC = oWebBrowserObject.Document.Script.photoSrc

The New Modern Web Browser Control

Dim sImgSRC              As String
    
sImgSRC = Me.EdgeBrowser55.RetrieveJavascriptValue("document.getElementById('photo').src")

where either of the above code samples should then return:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8L8PwHgAFSQIMUBuc8AAAAABJRU5ErkJggg==

to the sImgSRC variable.
 

The Code

Now that we understand what it is we are targeting with this code, how do we do it exactly.

Assuming you’ve retrieve the image’s src attribute, we need to:

1. Decode the base 64 string
2. Write the byte array to a file

Decode the base 64 string

To decode the string we use:

Public Function DecodeBase64(ByVal Base64String As String) As Byte()
    With CreateObject("MSXML2.DOMDocument").createElement("b64")
        .DataType = "bin.base64"
        .Text = Base64String
        DecodeBase64 = .nodeTypedValue
    End With
End Function

Write the byte array to a file

Now, to write the byte array to file, we do:

Public Sub WriteByteArrayToFile(FileData() As Byte, ByVal FilePath As String)
    Dim FileNumber As Long
    
    FileNumber = FreeFile
    Open FilePath For Binary Access Write As #FileNumber
    Put #FileNumber, 1, FileData
    Close #FileNumber
End Sub

Usage Example

Now that we have the pieces of the puzzle, we need only use them.

So to save the src attribute to file, we need only do:

Dim sSRCString as String

sSRCString ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAARklEQVR42u3PQREAAAQAMHroX08EMvi6rcFyKjoeSBERERERERERERERERERERERERERERERERERERERERERERERERGRiwXRYWYnbR/PcAAAAABJRU5ErkJggg=="
sSRCString = Replace(sSRCString, "data:image/png;base64,", "") 
WriteByteArrayToFile DecodeBase64(sSRCString), "C:\Users\Dev'Desktop\photo.png"

After running the code, you should end up with an image like:

That’s it! Easy once you know.