Saving image to your server

• File Upload
• JavaScript + HTML form
• Standard POST with BASE64 encoding

File Upload

To use this method, you should create a server script for processing file upload and specify the script as the value of the parameter "save" of System panel applet, for example:

<applet code="ControlPanel.class" archive="painter.jar" width="40" height="30">
	<param name="save" value="save.asp">
	... other parameters ....
</applet>

If the user presses the button the applet sends image data to the server using the regular file upload request. In other words the file is sent to the server as if it was produced by the following HTML form:

<form method="post" action="save.asp" enctype="multipart/form-data" >
    <input type="file" name="image">
</form>

The uploaded image file has PNG, or JPEG, or GIF format (depending on the value of the parameter save_format) and has one of the following names: "image.png", or "image.jpg", or "image.gif".

Please read it carefully: The response (output) of your saving script comes to the applet (not to the browser!). The applet doesn't understand HTML content and can't display it. So you may not output HTML in your script as usual. Instead you should output special control commands which allow you to redirect the browser to another HTML page or display a message in the browser's status line. Each command should be output in separate line in the following form:

#COMMAND=<parameter>

Here is an example:

#SHOWDOCUMENT=confirmation_page.htm

After receiving such response the editor loads the page confirmation_page.htm in the browser.

Here is the list of possible commands:

Note: Each response line that can't be treated as a command, is output to the browser's Java Console. You may use this feature to debug your saving script.

The advantage of the upload method is that the image comes to your server as an ordinary file. The drawback is it requires file upload support at your server. Also this method doesn't allow to combine image data with other information in one request to your server.
 

JavaScript + HTML form

This does not work in IE5 on Mac OS!

This method allows to send image data to the servers with an ordinary HTML form. To use this method you have to create an HTML form which contains a hidden field for keeping image data and other fields if required. Also you have to create a JavaScript which extracts image data from the editor and assigns it to the hidden field when the user submits the form. Image data can be extracted from the DrawCanvas by calling the public DrawCanvas function GetImage (format) in JavaScript. The function accepts the only parameter - the image format and returns the image in requested format additionally encoded by method BASE64. An implementation may look like the following:

<!-- Draw Canvas -->
<applet name="canvas" width="400" height="300" code="DrawCanvas.class" archive="painter.jar">
</applet>

<!-- Image extrating script -->
<script language="javascript">
function imageToForm() {
    // copy the image data from the Canvas to the hidden form field "image"
    document.saveform.image.value = document.applets["canvas"].GetImage("png");
    return true;
}
</script>

<!-- HTML form -->
<form name="saveform" action="save.php" method="post" onsubmit="return imageToForm();">
    <input type="hidden" name="image">
    <input type="submit" value="Submit">
</form>

To use the accepted image at your server as an ordinary graphic file, you have to decode the data from BASE64. Also you may open the image accepted from this form in the editor as is (i.e. without decoding), because J-Painter can open both binary images and BASE64 encoded. See Image loading for more details.

See the section Public function for more details about the DrawCanvas functions and how to call them from JavaScript.

Advantage of this saving method is that it allows to combine image data with other form data and pass them by one request. Drawback: You have to decode image data at your server to get an orinary image graphic file. Another drawback is this method does not work in IE5 on the Mac platform because it doesn't support JavaScript to Java communication.

Standard POST with BASE64 encoding

This method is similar to file upload saving but the image data are sent to the server as if they were produced by an HTML form like this:

<form method="post" action="save.php" >
	<input type="text" name="image">
	<input type="submit">
</form>

The image file is extra encoded by BASE64 method (to perform it as ordinary text) and posted to the server via the image field.

To use this method, you have to create a server-side script for accepting data at the server and point it in the parameter "save" of System panel. Also you have to specify the parameter "method" which value must be "base64", for example:

<applet code="ControlPanel.class" archive="painter.jar" width="40" height="30">
     <param name="save" value="save.php">
     <param name="method" value="base64">
</applet>

The script which accepts image data can output the control commands to the editor. See the File Upload method for more details.

The advantages of this method are: It doesn't require the file upload support at your server. The drawbacks: BASE64 decoding is required at the server and it doesn't allow to combine image data with data on a regular HTML form in a signle request.