PXN8 FAQ: Can I use PXN8 with J2EE servlets/JSP ?

This is the first in a series of questions and answers about PXN8. This question is from a Java team lead who wants to use PXN8 in their J2EE environment.

Because it is a J2EE project, the source image to be edited is sent from a Servlet in the form of an IO stream, and the finished image should stream up to a Servlet. Can PXN8 support this ?

This is actually 2 questions…

  1. Can PXN8 edit images returned by a servlet or other CGI ?
  2. Can the edited image be saved via a servlet ?

To answer the first question – Yes, PXN8 can edit either dynamic or static images. Assuming you have a servlet which streams an image from a database blob, the normal way to dislpay the image would be…
<img src="/imageServlet?imageId=493432" />
Where “/imageServlet” is the path to the servlet that streams the image, and “imageId” is the name of the parameter used by the servlet to uniquely identify the image (let’s assume the image is stored as a BLOB in a database). Well, PXN8 doesn’t treat dynamically created images any differently to static images. To begin editing the above image, use the following …

<body onload="PXN8.initialize('/imageServlet?imageId=493432');">

To answer the second question: Can the edited image be saved via a servlet ? – Yes the edited image can be saved via a servlet and here’s how…

First let’s assume the servlet is called ‘saveImageServlet’ and it takes a parameter named ‘imagePath’ which is a relative path to the modified image.

Add a form to the edit page …

<form action="/saveImageServlet" onsubmit="return insertImagePath();">
  <input id="imagePath" name="imagePath" type="hidden" value=""/>
  <input type="submit" value="Save Image"/>
</form>

The form’s “onsubmit” attribute refers to a script called “insertImagePath()”. This function (which has not yet been defined) will insert the modified image path into the form prior to submitting the form (since we can’t know in advance what the modified image’s path will be).
Next add the following script to your edit page.

<script type="text/javascript">
function insertImagePath()
{
  var imagePathField = document.getElementById("imagePath");
  imagePathField.value = PXN8.getUncompressedImage();
  return true;
}
</script>

What the above function does is get the hidden ‘imagePath’ field, set it’s value to that returned by PXN8.getUncompressedImage() (a function I will talk about in more detail) and returns true. The function must return true or the form won’t be submitted.
The PXN8.getUncompressedImage() function returns the relative path of the current modified image (at 100% quality – this is a higher quality, uncompressed version of the image displayed in the browser – Images displayed in the browser are at 85% quality to save on bandwidth). PXN8 stores all modified images in the cache/ folder, so the PXN8.getUncompressedImage() function might return something like the following…

cache/2_53B4C9FEDED9128953B4C9FEDED91289.jpg

This path is relative to the folder where you installed PXN8.
If you are writing a servlet or CGI script to save the image to a server gallery or database, remember that the image you want to save is already on the server. If saving to a permanent gallery, just copy the image from the temporary cache folder to the permanent gallery folder. If saving the image to a database using Java, then open a FileInputStream object and a Connection object and store the bytes into a BLOB.
As you can probably guess, the form and script elements described above will work equally well for a PHP implementation – just change the form’s action attribute.

Advertisements

3 thoughts on “PXN8 FAQ: Can I use PXN8 with J2EE servlets/JSP ?

  1. first i have an image then
    i have edit this image
    can i save this editable image in database

  2. sxoop says:

    Hi Vinay,

    Yes you could save the image to a database or the filesystem. Edited images are stored a cache folder which is cleared out every few hours. If you want to store the saved image permanently on your own server (assuming PXN8 is installed on the server), the simplest approach is to copy the image from the cache folder to a more permanent location on the filesystem. (or you could copy it to a database as a BLOB – but you probably want to avoid that overhead).

  3. PXN8.getUncompressedImage() returns false in two cases: the images has not been modified or an image has been uploaded
    Otherwise saving an edited image goes fine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: