Canvas-tutorials/index.html at gh-pages · DLar/Canvas-tutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
	<title>Percentage Image Maper</title>

	<style type="text/css">
		canvas {
			border: 1px solid black;
			background-color: #EFEFEF;
			margin: 2em 0;
			outline: none;
			display: block;
		}
		input[type=file],
		label {
			display: block;
		}
		#container {
			font-family: Arial, Helvetica, sans-serif;
			background-color: white;
			font-size: 14px;
			width: 1200px;
			margin: 0 auto;
		}
		h1 {
			margin: 1em 0;
		}
		table {
			border-collapse: collapse;
			display: block;
			margin: 2em 0;
		}
		th, td {
			padding: 15px;
			border: 1px solid black;
		}
		.inline {
			display: inline-block;
			vertical-align:top;
			max-width: 50%;
		}
	</style>

	<script type="text/javascript" src="boxes2.js"></script>
</head>
<body>
	<div id="container">
		<h1>Percentage Image Maper</h1>

		<div class="inline">
			<p><strong>Instructions</strong></p>
			<ol>
				<li>Select an image with the file picker below</li>
				<li>Double-click anywhere on the image to create a map area</li>
				<li>Click on the created map area to select it</li>
				<li>Use the square handles to resize or move the map area</li>
				<li>Multiple map areas can be added (colors will repeat after 6)</li>
				<li>Tables will dynamically generate below for each map area</li>
				<li>You can right-click the canvas to save the image with mapped areas</li>
			</ol>
		</div>

		<div class="inline">
			<p><strong>Limitations</strong></p>
			<ul>
				<li>Use Google Chrome for best performace<br>
					(Firefox and Safari should work, IE may not)</li>
				<li>Only 1 map area can be selected, moved, or resized at a time</li>
			</ul>
		</div>

		<!--<input type='file' onChange="readFile(this)" accept="image/*" />-->
		<input type="file" id="file" accept="image/*" /><br>
		<label>URL: <input type="url" id="url" /></label>

		<canvas id="canvas2" height="465" width="1160">
			If this text is displayed, your browser does not support HTML5 Canvas.
		</canvas>

		<table>
		  <thead>
			<tr>
			  <th>Top</th>
			  <th>Left</th>
			  <th>Width</th>
			  <th>Height</th>
			</tr>
		  </thead>
		<tbody id="info"></tbody>
		</table>
	</div>
</body>
</html>