📄 saving.htm
字号:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.7 [en] (WinNT; I) [Netscape]">
<title>Saving image to your server</title>
<link REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
</head>
<body>
<a href="./index.htm">CONTENTS</a>
<h3>Saving image to your server</h3>
The editor can save images by three different methods. Each of the methods has it's advantages
and disadvantages. You can choose the method that is the most convenient to your task,
software environment and scripting language.
<ul>
<li><a href="#upload">File Upload</a></li>
<li><a href="#javascript">JavaScript + HTML form</a></li>
<li><a href="#post">Standard POST with BASE64 encoding</a></li>
</ul>
<p><a NAME="upload"></a><b>File Upload</b>
<p>To use this method, you should create a server script for processing file upload
and specify the script as the value of <nobr>the parameter "save"</nobr> of <a href="placing.htm#System">System panel</a> applet,
for example:</p>
<pre><applet code="ControlPanel.class" archive="painter.jar" width="40" height="30">
<b><param name="save" value="save.asp"></b>
... other parameters ....
</applet></pre>
<p>If the user presses the button <img src="../applet/icons/104.gif" border="0" alt="save"> 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:</p>
<pre>
<form method="post" action="save.asp" enctype="multipart/form-data" >
<input type="file" name="image">
</form>
</pre>
<p>The uploaded image file has PNG, or JPEG, or GIF format (depending on the value of the parameter <a href="placing.htm#save_format">save_format</a>)
and has one of the following names: "image.png", or "image.jpg", or "image.gif".</p>
<p><a name="commands"><b>Please read it carefully:</b></a>
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</b> 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:</p>
<pre>#COMMAND=<parameter></pre>
<p>Here is an example:</p>
<pre>
#SHOWDOCUMENT=confirmation_page.htm
</pre>
<p>After receiving such response the editor loads the page <i>confirmation_page.htm</i> in the browser.</p>
<p>Here is the list of possible commands:</p>
<table BORDER >
<tr>
<th>Command name</th>
<th>Editor's action</th>
</tr>
<tr>
<td>#SHOWDOCUMENT</td>
<td>The editor asks the browser to load a new document. The <parameter> is the document URL.<br>
The URL can be either absolute or relative to the current script.
</td>
</tr>
<tr>
<td>#SETDOCTAG</td>
<td>The <parameter> is the target frame of the current page to load the document
specified by #SHOWDOCUMENT command.<br>
<font size="-1">To have an effect this command must preceeed #SHOWDOCUMENT command.</font>
</td>
</tr>
<tr>
<td>#SHOWMESSAGE</td>
<td>The editor displays a popup message using <parameter> as the message string.</td>
</tr>
<tr>
<td>#SHOWSTATUS</td>
<td>The editor shows the <parameter> in the browser's status line.</td>
</tr>
</table>
<p><b>Note:</b> 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.
</font></p>
<p>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.
<br>
<h4><a NAME="javascript"></a>JavaScript + HTML form</h4>
<p><b>This does not work in IE5 on Mac OS!</b></p>
<p>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 <a href="placing.htm#DrawCanvas">DrawCanvas</a>
by calling the <a href="pubfuncs.htm">public DrawCanvas function</a> <b>GetImage (format)</b> in JavaScript.
The function accepts the only parameter - the image format and returns the image in requested format
additionally encoded by <a href="base64.htm">method BASE64</a>.
An implementation may look like the following:</p>
<pre><!-- Draw Canvas -->
<applet <b>name="<font color="#0000c8">canvas</font>"</b> width="400" height="300" code="DrawCanvas.class" archive="painter.jar">
</applet>
<!-- Image extrating script -->
<script language="javascript">
function <font color="red">imageToForm()</font> {
// copy the image data from the Canvas to the hidden form field "image"
<b>document.saveform.image.value = document.applets["<font color="#0000c8">canvas</font>"].GetImage("png");</b>
return true;
}
</script>
<!-- HTML form -->
<form name="saveform" action="save.php" method="post" onsubmit="return <font color="red">imageToForm()</font>;">
<b><input type="hidden" name="image">
</b> <input type="submit" value="Submit">
</form>
</pre>
When the user presses "Submit" button at the form, the script extracts the image data
from the Canvas and assigns them to the hidden form field "image".
Then all the data (both image and other form fields if any) are passed to your server.
<p>To use the accepted image at your server as an ordinary graphic file, you have to decode
the data from <a href="base64.htm">BASE64</a>.
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 <a href="loading.htm">Image loading</a> for more details.
</p>
<p>See the section <a href="pubfuncs.htm">Public function</a> for more details
about the DrawCanvas functions and how to call them from JavaScript.</p>
<p>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.
</p>
<p><a NAME="post"></a><b>Standard POST with BASE64 encoding</b>
<p>This method is similar to <a href="#upload">file upload saving</a> but the image data
are sent to the server as if they were produced by an HTML form like this:<p>
<pre><form method="post" action="save.php" >
<input type="text" name="<b>image</b>">
<input type="submit">
</form></pre>
<p>The image file is extra encoded by <a href="base64.htm">BASE64</a> method (to perform it as ordinary text)
and posted to the server via the <b>image</b> field.</p>
<p>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 <a href="placing.htm#System">System panel</a>.
Also you have to specify the parameter "method" which value must be "base64", for example:</p>
<pre><applet code="ControlPanel.class" archive="painter.jar" width="40" height="30">
<param name="save" value="<b>save.php</b>">
<param name="method" value="<b>base64</b>">
</applet></pre>
When the user presses the <b>Save</b> button, the System panel sends image data to the server.
You can extract the data from the script variable <b>image</b>. Then you have to decode
the data from BASE64 to obtain the image in usual binary form.
<p>The script which accepts image data can output the <a href="#commands">control commands</a> to the editor.
See the <a href="#upload">File Upload</a> method for more details.</p>
<p>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.</p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -