forked from MikeKovarik/exifr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (155 loc) · 9.73 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
<!DOCTYPE html>
<html>
<head>
<!-- Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=UA-34562823-2"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'UA-34562823-2')
</script>
<!-- App -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1"/>
<title>Exifr</title>
<link rel="stylesheet" type="text/css" href="./homepage/app.css">
</head>
<body>
<header>
<h1>Exifr</h1>
<div class="description">
<p>The fastest and most versatile JavaScript EXIF reading library.</p>
<p>Check out the <a href="https://github.com/MikeKovarik/exifr">repo</a> or <a href="https://www.npmjs.com/package/exifr">npm</a> for docs and more information.</p>
</div>
<div class="badges">
<a href="https://travis-ci.org/MikeKovarik/exifr"><img src="https://travis-ci.org/MikeKovarik/exifr.svg?branch=master"></a>
<a href="https://coveralls.io/github/MikeKovarik/exifr"><img src="https://coveralls.io/repos/github/MikeKovarik/exifr/badge.svg"></a>
<!--
<a class="github-button" href="https://github.com/sponsors/MikeKovarik" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @MikeKovarik on GitHub">Sponsor</a>
-->
<a class="github-button" href="https://github.com/MikeKovarik/exifr/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue MikeKovarik/exifr on GitHub">Issue</a>
<a class="github-button" href="https://github.com/MikeKovarik/exifr" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star MikeKovarik/exifr on GitHub">Star</a>
<a class="github-button" href="https://github.com/MikeKovarik/exifr/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork MikeKovarik/exifr on GitHub">Fork</a>
</div>
</header>
<div id="grid" class="nowrap ${rawFullscreen === false ? 'raw-side' : rawFullscreen ? 'raw-fullscreen' : ''}">
<h2 id="input-head">Input</h2>
<h2 id="output-head">
Output
<span class="${color}">${status}</span>
</h2>
<div id="input">
<h3>File</h3>
<div id="dropzone">
<input id="picker" type="file" multiple change.trigger="onPick($event)">
<div if.bind="browserCompatibleFile" class="input-notice">
Click to open filepicker
<br>
or
<br>
drop your file here
</div>
<div if.bind="!browserCompatibleFile">
WARNING
<br>
Browsers cannot display
<br>
tif and heic images
</div>
<img if.bind="imageUrl && browserCompatibleFile" src.bind="imageUrl">
</div>
<h3>
Options
<span click.trigger="toggleAllOptions()">Toggle all</span>
</h3>
<form id="options">
<div>{</div>
<div muted> // <i>APP segments</i></div>
<div> tiff: <input type="checkbox" checked.bind="options.ifd0 || options.exif || options.gps || options.interop || options.ifd1 || options.makerNote || options.userComment" disabled change.trigger="parseFile()">,</div>
<div muted> <span>│</span> // <i>TIFF blocks</i></div>
<!-- TODO: disable or uncheck all of these blocks on unselecting tiff -->
<div> <span muted>├─</span>ifd0: <input type="checkbox" checked.bind="options.ifd0" change.trigger="parseFile()">,</div>
<div> <span muted>├─</span>exif: <input type="checkbox" checked.bind="options.exif" change.trigger="parseFile()">,</div>
<div> <span muted>├─</span>gps: <input type="checkbox" checked.bind="options.gps" change.trigger="parseFile()">,</div>
<div> <span muted>├─</span>interop: <input type="checkbox" checked.bind="options.interop" change.trigger="parseFile()">,</div>
<div> <span muted>├─</span>ifd1: <input type="checkbox" checked.bind="options.ifd1" change.trigger="parseFile()">,</div>
<div muted> <span>│</span> // <i>other data</i></div>
<div> <span muted>├─</span>makerNote: <input type="checkbox" checked.bind="options.makerNote" change.trigger="parseFile()">,</div>
<div> <span muted>└─</span>userComment: <input type="checkbox" checked.bind="options.userComment" change.trigger="parseFile()">,</div>
<div> xmp: <input type="checkbox" checked.bind="options.xmp" change.trigger="parseFile()">,</div>
<div> icc: <input type="checkbox" checked.bind="options.icc" change.trigger="parseFile()">,</div>
<div> iptc: <input type="checkbox" checked.bind="options.iptc" change.trigger="parseFile()">,</div>
<div muted> // <i>JPEG only</i></div>
<div> jfif: <input type="checkbox" checked.bind="options.jfif" change.trigger="parseFile()">,</div>
<div muted> // <i>PNG only</i></div>
<div> ihdr: <input type="checkbox" checked.bind="options.ihdr" change.trigger="parseFile()">,</div>
<div muted> // <i>output styles</i></div>
<div title="combine all segments and blocks into single output object"> mergeOutput: <input type="checkbox" checked.bind="options.mergeOutput" change.trigger="parseFile()">,</div>
<div> sanitize: <input type="checkbox" checked.bind="options.sanitize" change.trigger="parseFile()">,</div>
<div> reviveValues: <input type="checkbox" checked.bind="options.reviveValues" change.trigger="parseFile()">,</div>
<div> translateKeys: <input type="checkbox" checked.bind="options.translateKeys" change.trigger="parseFile()">,</div>
<div> translateValues: <input type="checkbox" checked.bind="options.translateValues" change.trigger="parseFile()">,</div>
<div muted> // <i>for XMP Extended</i></div>
<div> multiSegment: <input type="checkbox" checked.bind="options.multiSegment" change.trigger="parseFile()">,</div>
<!--
<div muted> // skip or only pick tags</div>
<div> pick: [<input type="text" name="pick">],</div>
<div> skip: [<input type="text" name="skip">],</div>
-->
<div>}</div>
</form>
</div>
<div id="thumb">
<h3>Embedded thumbnail</h3>
<img if.bind="thumbUrl" src.bind="thumbUrl">
<span if.bind="thumbUrl === undefined" class="small">
File doesn't contain thumbnail
</span>
</div>
<segment-box options.bind="options" output.bind="output" key="exif" title="EXIF"></segment-box>
<segment-box options.bind="options" output.bind="output" key="ifd1" title="Thumbnail (IFD1)" alias="ifd1"></segment-box>
<segment-box options.bind="options" output.bind="output" key="ifd0" title="Image (IFD0)" alias="ifd0"></segment-box>
<segment-box options.bind="options" output.bind="output" key="gps" title="GPS"></segment-box>
<!--
<segment-box options.bind="options" output.bind="output" key="interop"></segment-box>
-->
<segment-box options.bind="options" output.bind="output" key="iptc" title="IPTC"></segment-box>
<segment-box options.bind="options" output.bind="output" key="xmp" title="XMP"></segment-box>
<segment-box options.bind="options" output.bind="output" key="icc" title="ICC"></segment-box>
<segment-box options.bind="options" output.bind="output" key="jfif" title="JFIF (JPEG only)"></segment-box>
<segment-box options.bind="options" output.bind="output" key="ihdr" title="IHDR (PNG only)"></segment-box>
<segment-box options.bind="options" output.bind="output" key="makerNote" display="buffer"></segment-box>
<segment-box options.bind="options" output.bind="output" key="userComment" display="buffer"></segment-box>
<div id="raw" class="wrap">
<template if.bind="rawOutput.errors && rawOutput.errors.length > 0">
<h3 class="red">${rawOutput.errors.length === 1 ? 'Error' : 'Errors'}</h3>
<p class="red" repeat.for="error of rawOutput.errors">${error}</p>
</template>
<h3>
Raw output
<span click.trigger="rawFullscreen = !rawFullscreen">Toggle fullscreen</span>
</h3>
<pre>${rawOutput | json}</pre>
</div>
</div>
<h2>Examples</h2>
<p>You can find more examples <a href="https://github.com/MikeKovarik/exifr/tree/master/examples">here</a> in the <a href="https://github.com/MikeKovarik/exifr">GitHub repo</a>.</p>
<li><a href="./benchmark/gps-dnd.html">DND multiple photos, display their GPS on a map and measure time and RAM usage</a></li>
<li>Parsing XMP and extracting depth-map and <a href="./examples/depth-map-extraction.html">displaying it in a browser</a> or <a href="./examples/depth-map-extraction.js">saving it to disk with Node 'fs'</a></li>
<li>Extracting thumbnail and <a href="./examples/thumbnail.html">displaying it in a browser</a> or <a href="./examples/thumbnail.js">saving it to disk with Node 'fs'</a></li>
<li>Parsing in <a href="./examples/worker.html">web worker</a></li>
<li>Import format: <a href="./examples/fs.cjs">CommonJS</a> or <a href="./examples/esm.mjs">ES Modules</a></li>
<li>Filters & perf improvements: <a href="./examples/gps.js">Parsing as little tags to get GPS fast</a></li>
<li><a href="./examples/fs.cjs">Extract the full TIFF Segment</a> vs <a href="./examples/gps.js">just one block</a></li>
<li><a href="./benchmark/formats-reading.html">Speed comparison of various input formats</a></li>
<li><a href="./examples/base64.mjs">Using Base64 string as an input</a></a></li>
<li><a href="./examples/legacy.html">IE11 Support</a></li>
<li><a href="./examples/custom-build.mjs">Customization: importing file readers, segment parsers and dictionaries</a></li>
<h2>License</h2>
<p>MIT, Mike Kovařík</p>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="./node_modules/aurelia-script/dist/aurelia.umd.js"></script>
<script type="module" src="./homepage/app.js"></script>
</body>
</html>