snotmare.github.io/index.html at main · snotmare/snotmare.github.io · 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
<html>
<head>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="./fabric.min.js"></script>
	<script src="./code.js"></script>
	<link rel="stylesheet" href="./styles.css">
</head>

<body>
	<h3>Download photo</h3>
	<video id="vid" width="300" height="300" playsinline></video>

	<div id="canvasContainer" class="canvasContainer">
		<canvas id="thumbnail" style="z-index: 0;"></canvas>
		<canvas id="annotate" style="z-index: 1;"></canvas>
	</div>

	<br/>
	<br/>
	<div id="annotationButtons">
		<button onclick="clearCanvas()">Clear</button>
	</div>

	<br/>
	<br/>
	<div>
		<button id="captureButton" onclick="capture()">Capture</button>
		<button id="retakeButton" onclick="retake()">Retake</button>
		<button id="saveButton" onclick="save()">Save</button>
	</div>

	<br/>
	<br/>
	<h3>Upload photo</h3>
	<input type="file" id="upload" name="upload" accept="image/*" multiple onchange="upload(this)">


	<div id="images"></div>

	<br/>
	<br/>
	<h3>Debug output</h3>
	<div id="output"></div>
</body>
</html>