js_template.htm
来自「applet在線上繪圖,允許在瀏覽器上繪圖,最後儲存成各式的圖檔」· HTM 代码 · 共 103 行
HTM
103 行
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Using JavaScript templates</title>
<link REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
</head>
<body>
<a href="./index.htm">CONTENTS</a>
<h3>Using JavaScript templates</h3>
<p>
The editor consist of 7 components. Putting all the applet definitions in your HTML page directly makes it very complex.
In order to release your HTML code from many applet definitions you can prepare JavaScript code which creates
the editor's GUI.
</p>
<p>
At the same time this resolves the issue of the Windows XP security update described here
<a href="http://izhuk.com/docs/ie7fix.html">http://izhuk.com/docs/ie7fix.html</a>
</p>
<p>An example of such code can be found here: <a href="template.js">template.js</a>, and below is an example how to use it.</p>
<pre>
<!-- include the template -->
<script language="javascript" src="<a href="../applet/applet.js">../applet/applet.js"</a>></script>
<script language="javascript" src=<a href="template.js">"template.js"</a>></script>
<script language="javascript">
var codebase = '../applet'; // location of the editor files
painter = new Painter(codebase);
painter.canvas.width = 640;
painter.canvas.height = 480;
painter.canvas.param.load = 'myimage.png'; // specify an image to load at startup (if it's necessary)
painter.canvas.param.save = 'save.php'; // specify your <a href="saving.htm">server-side script</a> to save the image.
painter.write();
</script>
</pre>
<!-- include the template files -->
<script language="javascript" src="../applet/applet.js"></script>
<script language="javascript" src="template.js"></script>
<script language="javascript">
var codebase = '../applet'; // location of the editor files
painter = new Painter(codebase);
painter.canvas.width = 640; // width of the canvas
painter.canvas.height = 480; // height of the canvas
// painter.canvas.param.load = 'myimage.png'; // specify an image to load at startup (if it's necessary)
// painter.canvas.param.save = 'save.php'; // specify your server-side script to save the image.
painter.write();
</script>
<p>The code below shows how to display cliparts using the template:</p>
<script language="javascript">
var cliparts = new Array( 'flower.gif', 'cherry.gif', 'ladybird.gif', 'carrot.gif', 'apple.gif' );
clipartPanel = new ClipartPanel(painter,cliparts,1,5,50,50);
clipartPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
clipartPanel.write();
document.write(" "); // provide some space
var photos = new Array( 'photo1.jpg', 'photo2.jpg' );
photoPanel = new ClipartPanel(painter,photos,1,2,67,50);
photoPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
photoPanel.param.insertat = '0,0';
photoPanel.write();
// this function can be used to retrieve the image data
function showImageData() {
var data = painter.getImage("PNG");
window.alert(data);
}
</script>
<pre>
<script language="javascript">
var cliparts = new Array( 'flower.gif', 'cherry.gif', 'ladybird.gif', 'carrot.gif', 'apple.gif' );
clipartPanel = new ClipartPanel(painter,cliparts,1,5,50,50);
clipartPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
clipartPanel.write();
document.write("&nbsp;&nbsp;"); // provide some space
var photos = new Array( 'photo1.jpg', 'photo2.jpg' );
photoPanel = new ClipartPanel(painter,photos,1,2,67,50);
photoPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
photoPanel.param.insertat = '0,0';
photoPanel.write();
// this function can be used to retrieve the image data
function showImageData() {
var data = painter.getImage("PNG");
window.alert(data);
}
</script>
</pre>
</body>
</html>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?