| 9 |
lars |
1 |
<!doctype>
|
|
|
2 |
<html>
|
|
|
3 |
<head>
|
|
|
4 |
<title>jsPDF</title>
|
|
|
5 |
|
|
|
6 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
7 |
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css">
|
|
|
8 |
<link rel="stylesheet" type="text/css" href="css/main.css">
|
|
|
9 |
|
|
|
10 |
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
|
|
|
11 |
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
|
|
|
12 |
<script type="text/javascript" src="../jspdf.js"></script>
|
|
|
13 |
<script type="text/javascript" src="../libs/Deflate/adler32cs.js"></script>
|
|
|
14 |
<script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"></script>
|
|
|
15 |
<script type="text/javascript" src="../libs/Blob.js/BlobBuilder.js"></script>
|
|
|
16 |
|
|
|
17 |
<script type="text/javascript" src="../jspdf.plugin.addimage.js"></script>
|
|
|
18 |
|
|
|
19 |
<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
|
|
|
20 |
<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
|
|
|
21 |
<script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
|
|
|
22 |
<script type="text/javascript" src="js/basic.js"></script>
|
|
|
23 |
|
|
|
24 |
<script>
|
|
|
25 |
$(function() {
|
|
|
26 |
$("#accordion-basic, #accordion-text, #accordion-graphic").accordion({
|
|
|
27 |
autoHeight: false,
|
|
|
28 |
navigation: true
|
|
|
29 |
});
|
|
|
30 |
$( "#tabs" ).tabs();
|
|
|
31 |
$(".button").button();
|
|
|
32 |
});
|
|
|
33 |
</script>
|
|
|
34 |
</head>
|
|
|
35 |
|
|
|
36 |
<body>
|
|
|
37 |
|
|
|
38 |
<a href="https://github.com/MrRio/jsPDF">
|
|
|
39 |
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
|
|
|
40 |
</a>
|
|
|
41 |
|
|
|
42 |
<h1>jsPDF Demos</h1>
|
|
|
43 |
|
|
|
44 |
<p>Examples for using jsPDF with Data URIs below. Go <a href="https://github.com/MrRio/jsPDF">back to project homepage</a>.</p>
|
|
|
45 |
|
|
|
46 |
<div id="tabs">
|
|
|
47 |
<ul>
|
|
|
48 |
<li><a href="#tabs-basic">Basic elements</a></li>
|
|
|
49 |
<li><a href="#tabs-text">Text elements</a></li>
|
|
|
50 |
<li><a href="#tabs-graphic">Graphic elements</a></li>
|
|
|
51 |
</ul>
|
|
|
52 |
|
|
|
53 |
<div id="tabs-basic">
|
|
|
54 |
<div id="accordion-basic">
|
|
|
55 |
<h2><a href="#">Simple two-page text document</a></h2>
|
|
|
56 |
<div><p><pre>var doc = new jsPDF();
|
|
|
57 |
doc.text(20, 20, 'Hello world!');
|
|
|
58 |
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
|
|
|
59 |
doc.addPage();
|
|
|
60 |
doc.text(20, 20, 'Do you like that?');
|
|
|
61 |
|
|
|
62 |
doc.save('Test.pdf');</pre>
|
|
|
63 |
<a href="javascript:demoTwoPageDocument()" class="button">Run Code</a></p></div>
|
|
|
64 |
|
|
|
65 |
<h2><a href="#">Landscape document</a></h2>
|
|
|
66 |
<div><p><pre>var doc = new jsPDF('landscape');
|
|
|
67 |
doc.text(20, 20, 'Hello landscape world!');
|
|
|
68 |
|
|
|
69 |
doc.save('Test.pdf');</pre>
|
|
|
70 |
<a href="javascript:demoLandscape()" class="button">Run Code</a></p></div>
|
|
|
71 |
|
|
|
72 |
<h2><a href="#">Adding metadata</a></h2>
|
|
|
73 |
<div><p><pre>var doc = new jsPDF();
|
|
|
74 |
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
|
|
|
75 |
|
|
|
76 |
// Optional - set properties on the document
|
|
|
77 |
doc.setProperties({
|
|
|
78 |
title: 'Title',
|
|
|
79 |
subject: 'This is the subject',
|
|
|
80 |
author: 'James Hall',
|
|
|
81 |
keywords: 'generated, javascript, web 2.0, ajax',
|
|
|
82 |
creator: 'MEEE'
|
|
|
83 |
});
|
|
|
84 |
|
|
|
85 |
// Output as Data URI
|
|
|
86 |
doc.save('Test.pdf');</pre>
|
|
|
87 |
<a href="javascript:demoMetadata()" class="button">Run Code</a></p></div>
|
|
|
88 |
|
|
|
89 |
<h2><a href="#">Example of user input</a></h2>
|
|
|
90 |
<div><p><pre>var name = prompt('What is your name?');
|
|
|
91 |
var multiplier = prompt('Enter a number:');
|
|
|
92 |
multiplier = parseInt(multiplier);
|
|
|
93 |
|
|
|
94 |
var doc = new jsPDF();
|
|
|
95 |
doc.setFontSize(22);
|
|
|
96 |
doc.text(20, 20, 'Questions');
|
|
|
97 |
doc.setFontSize(16);
|
|
|
98 |
doc.text(20, 30, 'This belongs to: ' + name);
|
|
|
99 |
|
|
|
100 |
for(var i = 1; i <= 12; i ++) {
|
|
|
101 |
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
|
|
|
102 |
}
|
|
|
103 |
|
|
|
104 |
doc.addPage();
|
|
|
105 |
doc.setFontSize(22);
|
|
|
106 |
doc.text(20, 20, 'Answers');
|
|
|
107 |
doc.setFontSize(16);
|
|
|
108 |
|
|
|
109 |
for(var i = 1; i <= 12; i ++) {
|
|
|
110 |
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
|
|
|
111 |
}
|
|
|
112 |
doc.save('Test.pdf');</pre>
|
|
|
113 |
<a href="javascript:demoUserInput()" class="button">Run Code</a></p></div>
|
|
|
114 |
</div>
|
|
|
115 |
</div>
|
|
|
116 |
|
|
|
117 |
|
|
|
118 |
<div id="tabs-text">
|
|
|
119 |
<div id="accordion-text">
|
|
|
120 |
<h2><a href="#">Different font sizes</a></h2>
|
|
|
121 |
<div><p><pre>var doc = new jsPDF();
|
|
|
122 |
doc.setFontSize(22);
|
|
|
123 |
doc.text(20, 20, 'This is a title');
|
|
|
124 |
|
|
|
125 |
doc.setFontSize(16);
|
|
|
126 |
doc.text(20, 30, 'This is some normal sized text underneath.');
|
|
|
127 |
|
|
|
128 |
doc.save('Test.pdf');</pre>
|
|
|
129 |
<a href="javascript:demoFontSizes()" class="button">Run Code</a>
|
|
|
130 |
</p></div>
|
|
|
131 |
|
|
|
132 |
<h2><a href="#">Different font types</a></h2>
|
|
|
133 |
<div><p><pre>var doc = new jsPDF();
|
|
|
134 |
|
|
|
135 |
doc.text(20, 20, 'This is the default font.');
|
|
|
136 |
|
|
|
137 |
doc.setFont("courier");
|
|
|
138 |
doc.text(20, 30, 'This is courier normal.');
|
|
|
139 |
|
|
|
140 |
doc.setFont("times");
|
|
|
141 |
doc.setFontType("italic");
|
|
|
142 |
doc.text(20, 40, 'This is times italic.');
|
|
|
143 |
|
|
|
144 |
doc.setFont("helvetica");
|
|
|
145 |
doc.setFontType("bold");
|
|
|
146 |
doc.text(20, 50, 'This is helvetica bold.');
|
|
|
147 |
|
|
|
148 |
doc.setFont("courier");
|
|
|
149 |
doc.setFontType("bolditalic");
|
|
|
150 |
doc.text(20, 60, 'This is courier bolditalic.');
|
|
|
151 |
|
|
|
152 |
doc.save('Test.pdf');</pre>
|
|
|
153 |
<a href="javascript:demoFontTypes()" class="button">Run Code</a></p></div>
|
|
|
154 |
|
|
|
155 |
<h2><a href="#">Different text colors</a></h2>
|
|
|
156 |
<div><p><pre>var doc = new jsPDF();
|
|
|
157 |
|
|
|
158 |
doc.setTextColor(100);
|
|
|
159 |
doc.text(20, 20, 'This is gray.');
|
|
|
160 |
|
|
|
161 |
doc.setTextColor(150);
|
|
|
162 |
doc.text(20, 30, 'This is light gray.');
|
|
|
163 |
|
|
|
164 |
doc.setTextColor(255,0,0);
|
|
|
165 |
doc.text(20, 40, 'This is red.');
|
|
|
166 |
|
|
|
167 |
doc.setTextColor(0,255,0);
|
|
|
168 |
doc.text(20, 50, 'This is green.');
|
|
|
169 |
|
|
|
170 |
doc.setTextColor(0,0,255);
|
|
|
171 |
doc.text(20, 60, 'This is blue.');
|
|
|
172 |
|
|
|
173 |
doc.save('Test.pdf');</pre>
|
|
|
174 |
<a href="javascript:demoTextColors()" class="button">Run Code</a></p></div>
|
|
|
175 |
|
|
|
176 |
<h2><a href="#">Font-metrics-based line sizing and split</a></h2>
|
|
|
177 |
<div><p><pre>var pdf = new jsPDF('p','in','letter')
|
|
|
178 |
, sizes = [12, 16, 20]
|
|
|
179 |
, fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
|
|
|
180 |
, font, size, lines
|
|
|
181 |
, verticalOffset = 0.5 // inches on a 8.5 x 11 inch sheet.
|
|
|
182 |
, loremipsum = 'Lorem ipsum dolor sit amet, ...'
|
|
|
183 |
|
|
|
184 |
for (var i in fonts){
|
|
|
185 |
if (fonts.hasOwnProperty(i)) {
|
|
|
186 |
font = fonts[i]
|
|
|
187 |
size = sizes[i]
|
|
|
188 |
|
|
|
189 |
lines = pdf.setFont(font[0], font[1])
|
|
|
190 |
.setFontSize(size)
|
|
|
191 |
.splitTextToSize(loremipsum, 7.5)
|
|
|
192 |
// Don't want to preset font, size to calculate the lines?
|
|
|
193 |
// .splitTextToSize(text, maxsize, options)
|
|
|
194 |
// allows you to pass an object with any of the following:
|
|
|
195 |
// {
|
|
|
196 |
// 'fontSize': 12
|
|
|
197 |
// , 'fontStyle': 'Italic'
|
|
|
198 |
// , 'fontName': 'Times'
|
|
|
199 |
// }
|
|
|
200 |
// Without these, .splitTextToSize will use current / default
|
|
|
201 |
// font Family, Style, Size.
|
|
|
202 |
|
|
|
203 |
pdf.text(0.5, verticalOffset + size / 72, lines)
|
|
|
204 |
|
|
|
205 |
verticalOffset += (lines.length + 0.5) * size / 72
|
|
|
206 |
}
|
|
|
207 |
}
|
|
|
208 |
|
|
|
209 |
pdf.save('Test.pdf');</pre>
|
|
|
210 |
<a href="javascript:demoStringSplitting()" class="button">Run Code</a></p></div>
|
|
|
211 |
|
|
|
212 |
<h2><a href="#">fromHTML plugin</a></h2>
|
|
|
213 |
<div>
|
|
|
214 |
<div><p>This (BETA level. API is subject to change!) plugin allows one to scrape formatted text from an HTML fragment into PDF. Font size, styles are copied. The long-running text is split to stated content width.</p></div>
|
|
|
215 |
<div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv">
|
|
|
216 |
<h2 style="font-size:120%">Header Two</h2>
|
|
|
217 |
<strong><em>Double style span</em></strong>
|
|
|
218 |
<span style="font-family:monospace">Monotype span with
|
|
|
219 |
carriage return. </span><span style="font-size:300%">a humongous font size span.</span>
|
|
|
220 |
Followed by long parent-less text node. asdf qwer asdf zxcv qsasfd qwer qwasfd zcxv sdf qwer qwe sdf wer qwer asdf zxv.
|
|
|
221 |
<div <span style="font-family:serif">Serif Inner DIV (bad markup, but testing block detection)</div><span style="font-family:sans-serif"> Sans-serif span with extra spaces </span>
|
|
|
222 |
Followed by text node without any wrapping element. <span>And some long long text span attached at the end to test line wrap. qwer asdf qwer lkjh asdf zxvc safd qwer wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww qewr asdf zxcv.</span>
|
|
|
223 |
<p style="font-size:120%">This is a <em style="font-size:120%">new</em> paragraph.</p>
|
|
|
224 |
This is more wrapping-less text.
|
|
|
225 |
<p id="bypassme" style="font-size:120%">This paragraph will <strong style="font-size:120%">NOT</strong> be on resulting PDF because a special attached element handler will be looking for the ID - 'bypassme' - and should bypass rendering it.</p>
|
|
|
226 |
<p style="font-size:120%">This is <strong style="font-size:120%">another</strong> paragraph.</p>
|
|
|
227 |
</div>
|
|
|
228 |
<div><p><pre>var pdf = new jsPDF('p','in','letter')
|
|
|
229 |
|
|
|
230 |
// source can be HTML-formatted string, or a reference
|
|
|
231 |
// to an actual DOM element from which the text will be scraped.
|
|
|
232 |
, source = $('#fromHTMLtestdiv')[0]
|
|
|
233 |
|
|
|
234 |
// we support special element handlers. Register them with jQuery-style
|
|
|
235 |
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
|
|
|
236 |
// There is no support for any other type of selectors
|
|
|
237 |
// (class, of compound) at this time.
|
|
|
238 |
, specialElementHandlers = {
|
|
|
239 |
// element with id of "bypass" - jQuery style selector
|
|
|
240 |
'#bypassme': function(element, renderer){
|
|
|
241 |
// true = "handled elsewhere, bypass text extraction"
|
|
|
242 |
return true
|
|
|
243 |
}
|
|
|
244 |
}
|
|
|
245 |
|
|
|
246 |
// all coords and widths are in jsPDF instance's declared units
|
|
|
247 |
// 'inches' in this case
|
|
|
248 |
pdf.fromHTML(
|
|
|
249 |
source // HTML string or DOM elem ref.
|
|
|
250 |
, 0.5 // x coord
|
|
|
251 |
, 0.5 // y coord
|
|
|
252 |
, {
|
|
|
253 |
'width':7.5 // max width of content on PDF
|
|
|
254 |
, 'elementHandlers': specialElementHandlers
|
|
|
255 |
}
|
|
|
256 |
)
|
|
|
257 |
|
|
|
258 |
pdf.save('Test.pdf');</pre>
|
|
|
259 |
<a href="javascript:demoFromHTML()" class="button">Run Code</a></p></div></div>
|
|
|
260 |
|
|
|
261 |
</div>
|
|
|
262 |
</div>
|
|
|
263 |
|
|
|
264 |
|
|
|
265 |
<div id="tabs-graphic">
|
|
|
266 |
<div id="accordion-graphic">
|
|
|
267 |
<h2><a href="#">Draw example: rectangles / squares</a></h2>
|
|
|
268 |
<div><p><pre>var doc = new jsPDF();
|
|
|
269 |
|
|
|
270 |
doc.rect(20, 20, 10, 10); // empty square
|
|
|
271 |
|
|
|
272 |
doc.rect(40, 20, 10, 10, 'F'); // filled square
|
|
|
273 |
|
|
|
274 |
doc.setDrawColor(255,0,0);
|
|
|
275 |
doc.rect(60, 20, 10, 10); // empty red square
|
|
|
276 |
|
|
|
277 |
doc.setDrawColor(255,0,0);
|
|
|
278 |
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
|
|
|
279 |
|
|
|
280 |
doc.setDrawColor(0);
|
|
|
281 |
doc.setFillColor(255,0,0);
|
|
|
282 |
doc.rect(100, 20, 10, 10, 'F'); // filled red square
|
|
|
283 |
|
|
|
284 |
doc.setDrawColor(0);
|
|
|
285 |
doc.setFillColor(255,0,0);
|
|
|
286 |
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
|
|
|
287 |
|
|
|
288 |
doc.setDrawColor(0);
|
|
|
289 |
doc.setFillColor(255, 255, 255);
|
|
|
290 |
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded corners
|
|
|
291 |
|
|
|
292 |
|
|
|
293 |
doc.save('Test.pdf');</pre>
|
|
|
294 |
<a href="javascript:demoRectangles()" class="button">Run Code</a></p></div>
|
|
|
295 |
|
|
|
296 |
<h2><a href="#">Draw example: lines</a></h2>
|
|
|
297 |
<div><p><pre>var doc = new jsPDF();
|
|
|
298 |
|
|
|
299 |
doc.line(20, 20, 60, 20); // horizontal line
|
|
|
300 |
|
|
|
301 |
doc.setLineWidth(0.5);
|
|
|
302 |
doc.line(20, 25, 60, 25);
|
|
|
303 |
|
|
|
304 |
doc.setLineWidth(1);
|
|
|
305 |
doc.line(20, 30, 60, 30);
|
|
|
306 |
|
|
|
307 |
doc.setLineWidth(1.5);
|
|
|
308 |
doc.line(20, 35, 60, 35);
|
|
|
309 |
|
|
|
310 |
doc.setDrawColor(255,0,0); // draw red lines
|
|
|
311 |
|
|
|
312 |
doc.setLineWidth(0.1);
|
|
|
313 |
doc.line(100, 20, 100, 60); // vertical line
|
|
|
314 |
|
|
|
315 |
doc.setLineWidth(0.5);
|
|
|
316 |
doc.line(105, 20, 105, 60);
|
|
|
317 |
|
|
|
318 |
doc.setLineWidth(1);
|
|
|
319 |
doc.line(110, 20, 110, 60);
|
|
|
320 |
|
|
|
321 |
doc.setLineWidth(1.5);
|
|
|
322 |
doc.line(115, 20, 115, 60);
|
|
|
323 |
|
|
|
324 |
doc.save('Test.pdf');</pre>
|
|
|
325 |
<a href="javascript:demoLines()" class="button">Run Code</a></p></div>
|
|
|
326 |
|
|
|
327 |
<h2><a href="#">Draw example: circles and ellipses</a></h2>
|
|
|
328 |
<div><p><pre>var doc = new jsPDF();
|
|
|
329 |
|
|
|
330 |
doc.ellipse(40, 20, 10, 5);
|
|
|
331 |
|
|
|
332 |
doc.setFillColor(0,0,255);
|
|
|
333 |
doc.ellipse(80, 20, 10, 5, 'F');
|
|
|
334 |
|
|
|
335 |
doc.setLineWidth(1);
|
|
|
336 |
doc.setDrawColor(0);
|
|
|
337 |
doc.setFillColor(255,0,0);
|
|
|
338 |
doc.circle(120, 20, 5, 'FD');
|
|
|
339 |
|
|
|
340 |
doc.save('Test.pdf');</pre>
|
|
|
341 |
<a href="javascript:demoCircles()" class="button">Run Code</a></p></div>
|
|
|
342 |
|
|
|
343 |
<h2><a href="#">Draw example: triangles</a></h2>
|
|
|
344 |
<div><p><pre>var doc = new jsPDF();
|
|
|
345 |
|
|
|
346 |
doc.triangle(60, 100, 60, 120, 80, 110, 'FD');
|
|
|
347 |
|
|
|
348 |
doc.setLineWidth(1);
|
|
|
349 |
doc.setDrawColor(255,0,0);
|
|
|
350 |
doc.setFillColor(0,0,255);
|
|
|
351 |
doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
|
|
|
352 |
|
|
|
353 |
doc.save('My file.pdf');</pre>
|
|
|
354 |
<a href="javascript:demoTriangles()" class="button">Run Code</a></p></div>
|
|
|
355 |
|
|
|
356 |
<h2><a href="#">Draw example: Images</a></h2>
|
|
|
357 |
<div><p><pre>// Because of security restrictions, getImageFromUrl will
|
|
|
358 |
// not load images from other domains. Chrome has added
|
|
|
359 |
// security restrictions that prevent it from loading images
|
|
|
360 |
// when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access
|
|
|
361 |
// to temporarily get around this issue.
|
|
|
362 |
var getImageFromUrl = function(url, callback) {
|
|
|
363 |
var img = new Image, data, ret={data: null, pending: true};
|
|
|
364 |
|
|
|
365 |
img.onError = function() {
|
|
|
366 |
throw new Error('Cannot load image: "'+url+'"');
|
|
|
367 |
}
|
|
|
368 |
img.onload = function() {
|
|
|
369 |
var canvas = document.createElement('canvas');
|
|
|
370 |
document.body.appendChild(canvas);
|
|
|
371 |
canvas.width = img.width;
|
|
|
372 |
canvas.height = img.height;
|
|
|
373 |
|
|
|
374 |
var ctx = canvas.getContext('2d');
|
|
|
375 |
ctx.drawImage(img, 0, 0);
|
|
|
376 |
// Grab the image as a jpeg encoded in base64, but only the data
|
|
|
377 |
data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
|
|
|
378 |
// Convert the data to binary form
|
|
|
379 |
data = atob(data)
|
|
|
380 |
document.body.removeChild(canvas);
|
|
|
381 |
|
|
|
382 |
ret['data'] = data;
|
|
|
383 |
ret['pending'] = false;
|
|
|
384 |
if (typeof callback === 'function') {
|
|
|
385 |
callback(data);
|
|
|
386 |
}
|
|
|
387 |
}
|
|
|
388 |
img.src = url;
|
|
|
389 |
|
|
|
390 |
return ret;
|
|
|
391 |
}
|
|
|
392 |
|
|
|
393 |
// Since images are loaded asyncronously, we must wait to create
|
|
|
394 |
// the pdf until we actually have the image data.
|
|
|
395 |
// If we already had the jpeg image binary data loaded into
|
|
|
396 |
// a string, we create the pdf without delay.
|
|
|
397 |
var createPDF = function(imgData) {
|
|
|
398 |
var doc = new jsPDF();
|
|
|
399 |
|
|
|
400 |
doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
|
|
|
401 |
doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);
|
|
|
402 |
|
|
|
403 |
// Output as Data URI
|
|
|
404 |
doc.output('datauri');
|
|
|
405 |
}
|
|
|
406 |
|
|
|
407 |
getImageFromUrl('thinking-monkey.jpg', createPDF);
|
|
|
408 |
</pre>
|
|
|
409 |
<a href="javascript:demoImages()" class="button">Run Code</a></p></div>
|
|
|
410 |
</div>
|
|
|
411 |
</div>
|
|
|
412 |
</div>
|
|
|
413 |
</div>
|
|
|
414 |
|
|
|
415 |
</body>
|
|
|
416 |
</html>
|