-
Notifications
You must be signed in to change notification settings - Fork 82
/
index.html
executable file
·185 lines (160 loc) · 7.54 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="scripts/manifest.json" />
<link rel="apple-touch-icon" href="scrubber_logo_ios_homescreen.png" />
<title>Image Scrubber</title>
</head>
<link rel="stylesheet" type="text/css" href="scripts/css.css" />
<script>
// register service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js', { scope: '/image-scrubber/' })
.then(function (reg) {
if (reg.installing) {
console.log('Service worker installing');
} else if (reg.waiting) {
console.log('Service worker installed');
} else if (reg.active) {
console.log('Service worker active');
}
})
.catch(function (error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
</script>
<body>
<div id="drop-zone">
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 10 10"
>
<path
d="M5,3 l0,4 M3,5 l4,0"
fill="none"
stroke="#fff"
stroke-width="0.5"
/>
</svg>
</div>
<div id="topBar">
<div class="topBarDiv">
<label for="file-input" class="customFileOpen controlButton"
>Open Image 📂</label
>
<input id="file-input" type="file" />
</div>
<a
id="saveButton"
onclick="saveImage(this)"
class="topBarDiv controlButton"
>Save Image 💾</a
>
<div id="rotate" class="topBarDiv controlButton">
Rotate Image ⤾
</div>
<div id="paintBlur" class="topBarDiv" class="customFileOpen">
<form id="paintForm">
<input
type="radio"
id="Paint"
name="paintingAction"
value="paint"
/>
<label for="Paint">Paint</label> <button data-jscolor="{valueElement:null,value:'000000'}" id="paintColor" style="width:20px; height:20px;"></button><br />
<input
type="radio"
id="Blur"
name="paintingAction"
value="blur"
checked
/>
<label for="Blur">Blur </label><br />
<input
type="radio"
id="Undo"
name="paintingAction"
value="undo"
/>
<label for="Undo">Undo </label>
</form>
</div>
<div id="brushType" class="topBarDiv">
<form id="brushForm">
<input type="radio"
id="Round"
name="useBrush"
value="round" checked>
<label for="Round">Brush </label><br>
<input type="radio"
id="Area"
name="useBrush"
value="area">
<label for="Area">Rectangle</label><br>
<input type="radio"
id="Tap"
name="useBrush"
value="tap">
<label for="Tap">Tap </label><br>
</form>
</div>
<div id="brushSizeDiv" class="topBarDiv">
<center>
Brush Size<br />
<input
type="range"
min="10"
max="100"
value="55"
class="slider"
id="brushSizeSlider"
/>
Blur Radius<br />
<input
type="range"
min="40"
max="150"
value="75"
class="slider"
id="blurAmountSlider"
/>
</center>
</div>
</div>
<button id="about">About</button>
<div id="imageScrubberInfo">
<pre>
<center><b>Image Scrubber</b></center>
This is a tool for anonymizing photographs taken at protests.
It will remove identifying metadata (<a href="https://en.wikipedia.org/wiki/Exif">Exif data</a>) from photographs, and also allow you to selectively blur parts of the image to cover faces and other identifiable information.
Click or drag onto the open button to open a photograph. The program will display the data it is removing.
Click okay, and you can then save the scrubbed image by hitting save or right clicking on it and saving it. Maximum size is 2500x2500 pixels - larger images will be scaled down.
You can select between painting over the image or blurring it out. Dragging on the image will paint on or blur it. You can change your brush size via the slider. The blur function runs on top of shuffled, noisy, upscaled pixels and is fairly secure but sensitive information should be covered with the paint tool.
This tool works offline: on a phone you can load the page or add it to the homescreen, then turn on airplane mode (or turn off wifi/data) before opening any pictures. On a computer, <a href="https://github.com/everestpipkin/image-scrubber/archive/main.zip">download</a> the zipped code, open the folder, and open index.html in a browser with the internet turned off.
<strong>All processing happens directly in the browser- no information is stored or sent anywhere.</strong>
Bug reports or questions to: everest.pipkin@gmail.com
Github repo at <a href="https://github.com/everestpipkin/image-scrubber" target="_blank">github.com/everestpipkin/image-scrubber</a>
If you want other ways to cover your digital footprint, I've assembled a list of resources: via <a href="https://docs.google.com/document/d/1615pZB11BhsR0KtvyiXfzfMUBlxZi47HzzhWHIRpxwU/edit" target="_blank">Google Doc</a> or <a href="https://pastebin.com/TPgtvmVB" target="_blank">Pastebin</a>.
</pre>
</div>
<div id="exifInformationHolder"></div>
<canvas id="imageCanvas"></canvas>
<canvas id="tempCanvas"></canvas>
<canvas id="holderCanvas"></canvas>
<canvas id="rotationCanvas"></canvas>
<canvas id="blurredCanvas"></canvas>
<canvas id="offscreenCanvas"></canvas>
<script type="text/javascript" src="scripts/jscolor.js"></script>
<script type="text/javascript" src="scripts/exif.js"></script>
<script type="text/javascript" src="scripts/openImage.js"></script>
<script type="text/javascript" src="scripts/stackblur.js"></script>
<script type="text/javascript" src="scripts/js.js"></script>
</body>
</html>