Results 1 to 5 of 5

Thread: Generating HTML5 inline images with Lianja

  1. #1
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    6,092

    Generating HTML5 inline images with Lianja

    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.

    Code:
    <%
    // 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:

    Code:
    <img width="100px" height="100px"  src="data:image/png;base64,
    I2RlZmluZSBQRVJTT04gImJhcnJ5IgoKI2luY2x1ZGUgInRlc3QxLnByZyIK
    CiNpbmNsdWRlICJ0ZXN0Mi5wcmciCgojaW5jbHVkZSAidGVzdDMucHJnIgoK
    PyAiaGVsbG8gZnJvbSB0ZXN0IgoK" />
    The parameters to base64_encode_file( ) are as follows:

    Code:
    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.
    Last edited by barrymavin; 2013-03-10 at 00:38. Reason: objectWrite() argument order
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  2. #2
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,237
    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

  3. #3
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    6,092
    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
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  4. #4
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    2,045
    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

  5. #5
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,237
    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

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us