Tuesday, May 18, 2010

Dynamically generating an Image and displaying it with JQuery

The JQuery Code:

$(document).ready(function() {

CUSTOM JQUERY PLUGIN
$.fn.image = function(src, f){
return this.each(function(){
var i = new Image();
i.src = src;
i.onload = f;
this.appendChild(i);
});
}

-- on button click output image generating servlet to the div.

$('#clickme_button').click(function(){

$("#the_div").image('/rcms/chequeImageServlet',function(){

});

});


The Servlet:

response.setContentType("image/jpg");
//RESOLVE CACHING ISSUES
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);

try {
byte[] rb = null;

Cheque cheque = chequeEjb.getCheque(new Long(13));

if (cheque != null) {

rb = (byte[]) cheque.getImgFront();

cheque entity a POJO which stores images as Serializable , in DB Blob


if (rb != null && rb.length > 0) {
response.reset();

response.getOutputStream().write(rb, 0, rb.length);
response.getOutputStream().flush();


}
}
} finally {
response.getOutputStream().close();
}
}

Hats off to the below blog link:

http://letmehaveblog.blogspot.com/2006/08/simple-jquery-plugin-to-load-images.html

No comments:

Post a Comment