-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (126 loc) · 4.96 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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
<title>Free Photo Watermark Utility (client-side & open source)</title>
</head>
<style>
label {
padding: 10px;
font-weight: bold;
}
input, select {
padding: 2px;
margin: 5px;
}
.settings {
border: 1px #CCCCCC solid;
max-width: 500px;
margin: 20px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.gallery canvas {
width: 100%;
height: auto;
}
div.desc {
padding: 5px;
text-align: center;
font-size: 12px;
}
.filename {
padding: 2px;
text-align: center;
font-size: 8px;
}
</style>
<body>
<h1>[Free] Client-Side Image Date/Time Watermark Utility</h1>
Adds the "time photo was taken" as a watermark on your image & removes EXIF data. Useful for adding timestamps to photos & easily extensible. Safe & secure because all 'work' is done in your browser -- nothing ever leaves your browser, data is never sent to any server. <a href="https://github.com/ArthurD/timestamp-images-js">Free & open source</a>.<br><br>
Made possible thanks to: <a href="https://github.com/mattiasw/ExifReader">ExifReader library</a><br><br>
<small>
Your photos never get uploaded anywhere, it's 100% local -- your browser does all of the processing!<br>
<b>
If you find it useful, you can also checkout <a href="https://dantonio.info" title="Arthur D'Antonio III Personal Site">some of my other projects</a>!</b> :)
<br>
<b>Compatibility:</b>
Tested with pictures taken on recent-ish iPhones. Must be exported with EXIF data (location data NOT required).
EXIF data is fully removed from results.
<br>
</small>
<br>
<br>
<small>Test/Example Images to try it (right-click & select 'Save Link As'): <a href="example-iphone-photo.jpeg">example-iphone-photo.jpeg</a> and <a href="example-iphone-photo.png">example-iphone-photo.png</a></small>
<br>
<hr>
<h3>Settings & File Selection</h3>
<div class="settings">
<label for="txt">Watermark Text <small>([d] = timestamp):</small></label>
<input id="txt" type="text" value="[d]" />
<br />
<label for="fontSize">Font Size:</label>
<input id="fontSize" type="numeric" value="200" />
<br />
<label for="fontColorFill">Font Fill:</label>
<input type="color" id="fontColorFill" type="text" value="#FFFFFF" />
<br />
<label for="fontColorStroke">Font Stroke:</label>
<input type="color" id="fontColorStroke" type="text" value="#FFFFFF" />
<br />
<label for="txtPos">Watermark Position:</label>
<select name="txtPos" id="txtPos">
<option value="btmLeft">Bottom Left</option>
<option value="topLeft">Top Left</option>
<option value="btmRight">Bottom Right</option>
<option value="topRight">Top Right</option>
</select>
<br />
<label for="txtPos">Sort Order:</label>
<select name="sortOrder" id="sortOrder">
<option value="date_desc">Date (Newest to Oldest)</option>
<option value="date_asc">Date (Oldest to Newest)</option>
</select>
<!-- <label for="makeThumbnails">Make Thumbnails?</label> <input id="makeThumbnails" type="checkbox" value="true" /> <br />-->
<!-- <span id="thumbsEnabled" style="display: none;">-->
<!-- <label for="thumbnailSize">Thumbnail Size (%):</label> <input id="thumbnailSize" type="numeric" value="5%" /><br />-->
<!-- </span>-->
<br />
</div>
<div class="settings">
<label for="picker">
Select 1 or more Images <small>(png, jpg, jpeg)</small>:<br/>
<small style="margin-left: 25px; font-weight: normal;">Multi-select is allowed & enabled in file-picker dialog!</small>
</label>
<div class="picker">
<input type="file" id="picker" name="fileList" accept=".jpg,.png,.jpeg" multiple>
</div>
</div>
<b><button style="display: none;" id="downloadAllBtn">Download All</button>
<hr>
<div id="listing">
<!-- IMAGES WILL GO HERE -->
</div>
</body>
<script src="vendor/exif-reader.js"></script>
<!-- <script src="vendor/pica.js"></script>-->
<script src="vendor/moment.min.js"></script>
<script src="exif.js"></script>
<script>
window.addEventListener('load', function () {
// document.getElementById('makeThumbnails').addEventListener('change', function() {
// let enabled = document.getElementById("makeThumbnails").checked;
// document.getElementById("thumbsEnabled").style.display = enabled ? "" : "none";
// }, false);
});
</script>
</html>