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.

[hmischel@diligentsystems.com]

Hi Barry, Yvonne,

I am trying to explore different possibilities of using the webview with images.

I have millions of images across my servers, so keeping them in a single application directory is not going to work.

I would like to be able to display specific images in the webview.

Looking at the

base64_encode_image(object_fieldname [,width,height [,cssattr ]])

documentation, I would like to specify the full network path of the file, have it written as temp file (as if it came from a database) and display it the webview.

It looks possible, (with include file - I think) but I can't get it working properly.

Thanks.

Herb

[barrymavin]

Hi Herb,

Based on your requirements I would suggest you look at using the getfile() method in the networkrequest class to fetch the image into a temporary file which you can then process and if needed send back with putfile() in the same class.

http://www.lianja.com/doc/index.php/NetworkRequest

[HankFay]

Hi Herb,

base64_encode_image is meant to work off binary memo (blob) fields.

base64_encode_file has the same parameters and output except that it takes a file reference as the first parameter.

Interesting decision to make: store all those images in a (very large) table or put them in a maze of directories. Because of the ability to store metadata about the image with (or attached to via relations) the image, and the ability to move the database easily to a different infrastructure, I would favor a table. Having been burned by backup routines and tables, I would have the files also stored in a different physical location as files on a network. <s> A Lianja database installed on its own instance would be very useful here because of the ability to SEEK a single record (nothing is faster than a SEEK -- use a stored procedure to find the record and return the base64-encoded result) and the ability to tune (using smartquery) that instance of the LSS for handling images.

Hank

[hmischel@diligentsystems.com]

Thanks Hank and Barry.

In the end, I just pointed a web url at the root folder of the images and that is doing just what I need.

Herb