Dynamics 365 Business Central: How to preview Base64 string image within BC (Base64 Image Viewer)

Hi, Readers.
Today I would like to discuss an interesting topic, how to preview Base64 string image within BC (Base64 Image Viewer).

Base64 is a binary to a text encoding scheme that represents binary data in an American Standard Code for Information Interchange (ASCII) string format. It’s designed to carry data stored in binary format across the channels, and it takes any form of data and transforms it into a long string of plain text. You can find more about Base64 in wiki.
We have previously discussed methods for importing and exporting Base64 strings.

And for image conversion to Encoded Text (Base64), we can use an external conversion tool, for example,
Convert PNG to Base64 tool:

Or Image to Base64:

Of course the reverse is also possible:
Base64 to Image:

So if we have the Base64 string of the image, can we preview it in BC? Yes, it can be done. It just takes a little tip.
In Dynamics 365 Business Central: Using WebPageViewer Add-in (“Microsoft.Dynamics.Nav.Client.WebPageViewer”), we discussed that this can display HTML contents.

Let’s look at some simple examples:
HTML Basic:

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">This is HTML Heading</h1>
<p style="background-color:Tomato;">This is HTML paragraph.</p>
<a href="https://yzhums.com">ZHU's blog</a>
</body>
</html>

List:

<ul>
  <li>BC18</li>
  <li>BC17</li>
  <li>BC16</li>
</ul>

Form:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

JavaScript:

<!DOCTYPE html>
<html>
<body>
<h1>Test JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

PS: We recently used this standard add-in when discussing Dynamics 365 Business Central: Preview files within BC (PDF, JPG, PPTX, DOCX, XLSX, TXT, CSV, MP4…… Most file types supported for previewing files in SharePoint) – No JavaScript control add-in

If you want to display an image in HTML, here is a simple example

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src – Specifies the path to the image
alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed

A simple test:

So we can display the image through HTML Image Src with BC. This requires a little simple conversion.

I created a simple Base64 Image Viewer tool.

Test video:

Great, give it a try!!!😁

Source Code: GitHub (Please note that the source code is for reference only, you can improve it according to your own needs)

page 50100 "Base64 Image Viewer"
{
    Caption = 'Base64 Image Viewer';
    PageType = Card;
    ApplicationArea = All;
    UsageCategory = Administration;
    layout
    {
        area(Content)
        {
            group(Input)
            {
                Caption = 'Base64 String';
                field(Base64String; Base64String)
                {
                    ApplicationArea = All;
                    ShowCaption = false;
                    MultiLine = true;
                    ExtendedDatatype = RichContent;
                    trigger OnValidate()
                    var
                        HTMLImgSrcTok: Label 'data:image/%1;base64,%2', Locked = true;
                    begin
                        HTMLText := '<img src=' + StrSubstNo(HTMLImgSrcTok, 'Jpeg', Base64String) + '>';
                        CurrPage.WebPageViewer.SetContent(HTMLText);
                    end;
                }
            }
            group(Image)
            {
                usercontrol(WebPageViewer; WebPageViewer)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
    var
        Base64String: Text;
        HTMLText: Text;
}

PS: You can download the text file below to test it directly.

1896-S-ATHENS-Desk Download

10000-Adatum-Corporation Download

30000-School-of-Fine-Art Download

END

Hope this will help.

Thanks for reading.

ZHU