Generating HTML5 inline images with Lianja

[barrymavin]

As stated on WikiPedia:

The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.

To make it easier to use these in Lianja .rsp pages for WebViewWidgets and HTML5 generated reports, Lianja Beta10 includes a new function:

base64_encode_file( )

This function will read a file, generate the base64 encoded contents of the file (optionally enclosed in an IMG tag) and output it into the WebView or HTML5 sent to a browser.

This makes it easy to have images stored in a Lianja database (e.g. photos) and have them displayed in a WebView with only a few lines of code.

Let's assume we have an .rsp page written in the Visual FoxPro compatible scripting language embedded in Lianja called generatepage.rsp. The code required to display an image stored in a table would look like this.

<%
// open a table the NoSQL way
use attachments order tag empname

// Look up an employee
seek "Smith"

// Create a unique temporary name (guaranteed uniqueness across concurrent users in a network)
m_tmpnam = tmpnam()

// Extract the photo from the database and write it to the temporary file
objectWrite(m_tmpnam,photo)

// Generate the base64 encoded contents as an IMG tag and output into the HTML5 
base64_encode_file(m_tmpnam, objectType(photo), "100px", "100px")

// Don't forget to remove the temporary file
erase &m_tmpnam
%>

Because we specified the (optional) type of the data, an IMG tag will be formatted and sent. If we specify only the filename then only the base64 encoded contents of the file will be sent. This allows you to embed base64 encoded data wrapped by other HTML5 tags.

The output looks something like this:

<img width="100px" height="100px"  src="data:image/png;base64,
I2RlZmluZSBQRVJTT04gImJhcnJ5IgoKI2luY2x1ZGUgInRlc3QxLnByZyIK
CiNpbmNsdWRlICJ0ZXN0Mi5wcmciCgojaW5jbHVkZSAidGVzdDMucHJnIgoK
PyAiaGVsbG8gZnJvbSB0ZXN0IgoK" />

The parameters to base64_encode_file( ) are as follows:

nSize = base64_encode_file(cFilename [, cType [, cWidth [, cHeight [, cOptional]]]] )

cFilename is the path to the file on the local filesystem (make sure you have the access permissions correct when using this with the Lianja Cloud)

cType is the (optional) type of data e.g. "gif", "png", "jpg"

cWidth is the (optional) width to be specified on the IMG tag e.g. "10%" or "100px"

cHeight is the (optional) height to be specified on the IMG tag e.g. "10%" or "100px"

cOptional allows you to specify such things as 'style="background-color: green;' which will be included in the IMG tag

It is worth pointing out that Lianja .rsp pages are cross-platform. They require no third party software to be installed, just Lianja. They can be used to generate reports or output any other HTML5 content -- all written in a Visual FoxPro compatible scripting language that comes embedded within Lianja.