imagejs.github.com/index.html at master · ebadedude/imagejs.github.com · 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
94
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ImageJS from Mathbiol</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<style>
		body { padding-top: 60px; } /* 60px to make the container go all the way to the bottom of the topbar */
	</style>
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
	<div id="menu">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a class="brand" href="#">ImageJS</a>
					<div class="nav-collapse">
					<ul id="menu2" class="nav"></ul>
					</div><!--/.nav-collapse -->
				</div>
			</div>
		</div>
	</div>
	<div id="wcontainer" class="container">
		<div id="msg">drag png, jpeg or gif image in the box to start: </div>
		<div id="work">
			<canvas id="cvBase" style="border:solid 1px">sorry, your browser does not support HTML5</canvas>
			<div id="manualUPL">
				or <input type="file" id="uploadimg" name="uploadimg" value="Upload File">
			</div>
			<div id="foot"></div>
		</div>
	</div> <!-- /container -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="http://jmat.googlecode.com/git/jmat.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="imagejs.js"></script>
    <script type="text/javascript">
    	//Take care of conflicts
    	jQuery.noConflict();

	    jQuery(document).ready(function(){
			imagejs.start();

			// based on http://www.html5rocks.com/en/tutorials/file/dndfiles/
			function handleFileSelect(evt) {
				evt.stopPropagation();
				evt.preventDefault();
				imagejs.readImage(evt.dataTransfer.files);
			}

			function manualFileSelect(evt) {
				var files = evt.target.files;
				imagejs.readImage(files);
			}

			function handleDragOver(evt) {
				evt.stopPropagation();
				evt.preventDefault();
				evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
			}

			// Setup the dnd/manual listeners.
			var dropZone = document.getElementById('work');
			var manualSel = document.getElementById('uploadimg');
			dropZone.addEventListener('dragover', handleDragOver, false);
			dropZone.addEventListener('drop', handleFileSelect, false);
			manualSel.addEventListener('change', manualFileSelect, false);
    	});
    </script>
</body>
</html>