-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
63 lines (59 loc) · 2.6 KB
/
index.html
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
<html>
<head>
<meta name="google-site-verification" content="772SnMSyIMzcGQJ_74cYZEQB2CZKswi0L0cvhWhV4cc" />
<!--
Use Google Chrome Frame to render in IE if available.
-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<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.16/jquery-ui.min.js"></script>
<script src="jmat.js"></script>
<!--
canvas-toblob.js is a polyfill for canvas.toBlob that is not implemented
in Chrome yet: http://code.google.com/p/chromium/issues/detail?id=83103
-->
<script src="libs/canvas-toblob/canvas-toblob.js"></script>
<!--
filesaver.js is a polyfill for the FileSaver interface that is not implemented
in Chrome yet: http://code.google.com/p/chromium/issues/detail?id=65615
-->
<script src="libs/filesaver/filesaver.js"></script>
<script src="imagejs.js"></script>
<link rel="stylesheet" type="text/css" href="imagejs.css">
</head>
<body onload="imagejs.start()">
<div id="menu"></div>
<div id="msg">[<a href="https://github.com/imagejs/imagejs.github.com">Code</a>] [<a href="http://www.youtube.com/watch?v=qbKBGb4EchE">YouTube#1</a>] [<a href="http://www.youtube.com/watch?v=NCPNgRxWWDQ">YouTube#2</a>] [<a href="https://www.ncbi.nlm.nih.gov/pubmed/22934238" target="_blank">J Pathology Informatics</a>] <br> To start, drag png, jpeg or gif image into the box, up to 4 Mpixels:</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="work2" name="work2" value="Upload File">
</div>
<div id="foot"></div>
</div>
<script>
// 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('work2');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
manualSel.addEventListener('change', manualFileSelect, false);
</script>
</body>
</html>