Monday, March 14, 2011

Using BLOB Images in Open BlueDragon

I've been helping my friend Brandon a bit today with Open BlueDragon, specifically with manipulating and displaying images that are stored in a database as BLOB data. Not terribly tricky stuff but it is a bit different than how you might deal with this in Adobe ColdFusion so I thought I'd write up a little how to.


In case you want to experiment from the ground up, and this also helps illustrate everything in detail, let's start by creating a database to hold BLOB data. I'll use MySQL, but this works exactly the same (as far as I know anyway) with any database. First, create a new database in MySQL, and then create a files table:



CREATE TABLE files
(id int unsigned auto_increment not null primary key,
file longblob not null);


Now we have a basic table with an auto-increment integer ID and our file data as a LONGBLOB. With your database in place, create a datasource in the OpenBD admin console called blobTest and point to this database.


Next let's create a simple file upload page called imagetest.cfm:



<form action="imagetest2.cfm"
        method="post"
        enctype="multipart/form-data">
    File: <input type="file" name="theFile" /><br />
    <input type="submit" />
</form>


Nothing fancy there. This form submits to imagetest2.cfm which looks like this:



<!--- upload the file --->
<cffile action="upload"
        filefield="theFile"
        destination="#ExpandPath('.')#"
        nameconflict="makeunique" />

<!--- read the file into a variable --->
<cffile action="readbinary"
        file="#ExpandPath('./#CFFILE.ServerFile#')#"
        variable="fileBinary" />

<!--- delete the file from disk --->
<cffile action="delete"
        file="#ExpandPath('./#CFFILE.ServerFile#"')#" />

<!--- insert the binary data into the db --->
<cfquery name="insertBlob" datasource="blobTest">
    INSERT INTO files (file)
    VALUES(<cfqueryparam value="#fileBinary#"
                    cfsqltype="cf_sql_blob" />)
</cfquery>

File inserted.


In imagetest2.cfm we upload the file, read the file from disk using the READBINARY action of CFFILE, delete the uploaded file from disk (since we're storing the image in the database we don't need the file on disk any longer), and then insert the binary data into the database using CFQUERYPARAM and a CFSQLTYPE of CF_SQL_BLOB. So it's clear, the file field in the database contains the binary representation of the file that was uploaded.


Finally let's take a look at how to pull the binary data for the image back out of the database, resize it, and then display it in the browser, which we do in a file called imagetest3.cfm:



<!--- get the most recently inserted image out of the db --->
<cfquery name="getimages" datasource="blobTest">
    SELECT id, file
    FROM files
    ORDER BY id DESC
    LIMIT 1
</cfquery>

<!--- resize the image to a width of 200 pixels --->
<cfset imgNew = ImageNew(getimages.file) />
<cfset ImageResize(imgNew, 200) />

<!--- output the image to the browser (assuming image is jpg) --->
<cfoutput>
    <img src="#ToDataUri(imgNew, 'image/jpg')#" />
</cfoutput>


Here we first grab the most recently inserted file from MySQL. If you want to display the image in the browser without manipulating it, meaning what's in the database is exactly what you want to show to the user, you can skip down to the CFOUTPUT section and use getimages.file as the first argument to the ToDataUri() function. I'll elaborate on ToDataUri() in a second.


In Brandon's case he was asking how he would resize the image and do some other manipulation after getting it out of the database, which luckily is pretty simple. First we use the ImageNew() function to create a new image object since this is the type of object that all the image manipulation functions work with.


Next we resize the image to a width of 200 pixels using ImageResize().This function takes an image object as the first argument, and a width as the second argument. An optional third argument is height, and an optional fourth argument is quality. For this example we're just blindly resizing to a width of 200 pixels no matter what the original size was (which of course isn't likely what you'd be doing in a real world app), and if you omit height it will change the height proportional to the width. At this point we have the variable imgNew as binary image data and the image has been resized to a width of 200 pixels.


Now we want to output the image to the browser. Adobe ColdFusion accomplishes this via the CFIMAGE tag with an action of WriteToBrowser, but WriteToBrowser is not implemented in Open BlueDragon. Instead, Open BlueDragon introduced the ToDataUri() function, which is a more flexible, standardized way of writing binary data to the browser. ToDataUri() is not specific to image data and can be used with data of any valid MIME type, and the MIME type is specified in the second argument of the ToDataUri() function.


The data URI scheme allows you to call inline data on a page as if it were an external HTTP resource. You can see what the URI looks like by right-clicking on the image displayed in your version of imagetest3.cfm and choosing "view image" in Firefox (or the equivalent in another browser). Mine looks like this:



data:image/jpg;base64,/{base64_data_here}


Where {base64_data_here} is the base 64-encoded version of the image in question. ToDataUri() converts binary data to base 64 on the fly so you don't need to do that yourself ahead of time using functions like ToBase64() or ImageReadBase64().


That's it for this little tutorial. Hope it helps others dealing with BLOB data in OpenBD.

No comments: