1. Create a CFC with the setStudentImage function. This calls another CFC which simply returns a query with all matching user images, loops through the results base64-encodes the image, adds it to the array, then returns the array. (We need to base64-encode the image, so that we can hand it off to JSON, (Is this really needed? I haven't checked, as I notice that I am returning an array to Javascript, and not JSON)).
<cffunction name="setStudentImage"
access="remote"
return="array"
hint="returns image via email
@return result array">
<cfargument name="email" type="string" required="false" default="">
<!--- Define variables --->
<cfset var data="">
<cfset var result = ArrayNew(1)>
<!--- do search --->
<cfset userObject = cfcCard.getImageByEmail( '#email#' )>
<!--- build result array --->
<cfloop query = "userObject">
<cfset base64Img = ToBase64( userObject.IMAGE )>
<cfset ArrayAppend( result, '#base64Img#')>
</cfloop>
<cfreturn result>
</cffunction>
2. We create our cfajaxproxy, and the Javascript to call Coldfusion for the image, then modify our img tag to display our image:
<cfajaxproxy cfc="#Application.cfcPath#.Card" jsclassname="o">
<script type="text/javascript">
function callSetStudentImage( useremail ) {
var inst = new o();
var result = inst.setStudentImage( String( useremail ) ) ;
return result;
}
...
function getStudentInfo( magstrip ) {
...
var userimg = callSetStudentImage( useremail );
if (userimg != "") {
$( '#myimg' ).attr( 'src', 'data:image/*;base64,' + userimg ).resize({maxHeight: 150, maxWidth: 200});
3. Ben Forta's method for displaying images from a database here, worked well for everything, except for size manipulation, so I turned to a great jQuery plugin, jQuery Resize Image Plugin, to do the resizing for me:
$( '#myimg' ).attr( 'src', 'data:image/*;base64,' + userimg ).resize({maxHeight: 150, maxWidth: 200});
The only issues that I have now, are displaying the base64-encoded images in Google Chrome, (for some reason), and Firefox 4 Beta 1...
No comments:
Post a Comment