forked from nmeyering/voronoi-faces
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
107 lines (105 loc) · 4.7 KB
/
index.html
File metadata and controls
107 lines (105 loc) · 4.7 KB
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
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta charset="UTF-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.facedetection.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="rhill-voronoi-core.min.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript" src="clip.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<a href="https://github.com/nmeyering/voronoi-faces/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div id="content">
<div id="settings">
<h2>What am I looking at?</h2>
<p>
This is a tool to help you tag faces in a photo and and automatically define image regions to be associated with names, i.e. to display them when hovering over.
</p>
<p>
It was made for a very specific use case I had, but it may be useful for your purposes too.
</p>
<p>
Everything works client-side, you only need a web server if you want to host the finished web page.
</p>
<h2>Step-by-Step Usage Guide</h2>
<ol>
<li>
Choose an image.
<p>
<input id="loadimage" type="file"/>
</p>
</li>
<li>
<p>
<input id="titleinput" type="text" value="Title"/>
</p>
</li>
<li>
Press to reset and detect faces automatically. <strong>Don't Panic!</strong>
This might take some time. <br/>
<p>
<input id="detectfaces" disabled="disabled" type="button" value="Detect Faces"/>
</p>
</li>
<li>
Click to add a new point or Ctrl+Click (Cmd+Click) to remove the closest point.</li>
<li>
You can toggle at any time to a print mode which overlays the numbers. They are sorted roughly from top to bottom, left to right.
<p><input id="printview" disabled="disabled" type="button" value="print view"/></p>
</li>
<li>
[Optional] Define a boundary (clipping) polygon.
<p>
<input id="boundaryButton" type="button" value="edit boundary"/>
<input id="boundaryResetButton" type="button" value="reset boundary"/>
<div id="boundaryHelp" class="help info"></div>
</p>
</li>
<li>At this point, save your progress! Use Right click > Save Image to save the print overlay of your original image and use this button to export the positions of the faces to a JSON file.
<p>
<input id="savefile" type="button" value="Save as JSON"/>
</p>
<p>
Afterwards you can <em>Import</em> the saved face positions and boundary polygon again.
<p>
<input id="loadfile" type="file" accept="application/json" />
</p>
</p>
</li>
<li>
Produce a list of names.
It has to be a JSON <em>array</em> of objects of the form <pre>{"id": "42", "first": "Richard M.", "last": "Stallman"}</pre>
<small>
If you happen to have used e.g. Google Spreadsheets and you use vim, you can use the vim commands I used (<tt>convert_names.vim</tt>) to convert a CSV file to the required JSON format. Just say <tt>:source convert_names.vim</tt>.
</small>
</li>
<li>
Now load the JSON file with the name list here:
<p>
<input id="loadnames" type="file" accept="application/json"/>
<div id="namesHelp" class="help"></div>
</p>
</li>
<li>
You're done! Click the button below to export the finished page. You will now want to define a proper title for your web page and maybe reorder the names or add dividers in between. Names can be put in any order, this doesn't affect the highlighting.
<p>
In order to host the site, point your webserver to folder with all the relevant files: output.html, static.js, static.css and the image you selected. No server side scripting of any kind required. That's it.
</p>
</li>
</ol>
<div class="divider"></div>
<p>
<input id="savehtml" type="button" value="Export the finished HTML page"/>
</p>
</div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<img id="picture" src="test.jpg" />
</body>
</html>