-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathimagejs.html
59 lines (55 loc) · 2.24 KB
/
imagejs.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
<html>
<head>
<meta name="google-site-verification" content="772SnMSyIMzcGQJ_74cYZEQB2CZKswi0L0cvhWhV4cc" />
<link href="http://localhost:8888/imagejs/jquery-ui-1.8.17.custom/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css"/>
<script src="http://localhost:8888/imagejs/jquery-ui-1.8.17.custom/js/jquery-1.7.1.min.js"></script>
<script src="http://localhost:8888/imagejs/jquery-ui-1.8.17.custom/js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="http://localhost:8888/jmat/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">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="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>