Create a gist now

Instantly share code, notes, and snippets.

From b62bc38b72a6646cd4cb87a84355a7e8c2720e8f Mon Sep 17 00:00:00 2001
From: Stoyan <ssttoo@ymail.com>
Date: Wed, 18 Jan 2017 18:14:39 -0800
Subject: [PATCH] Exif tool based on FAIL
---
README.md | 6 +-----
manifest.json | 6 +++---
package.json | 5 +++--
public/exif-icon.png | Bin 0 -> 620 bytes
public/favicon.ico | Bin 1150 -> 1150 bytes
public/index.html | 4 ++--
src/App.js | 53 +++++++++++++++++++++++++++++++++++++++------------
7 files changed, 50 insertions(+), 24 deletions(-)
create mode 100644 public/exif-icon.png
diff --git a/README.md b/README.md
index 23b1a1f..2b18733 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1 @@
-File API Input Layer (FAIL) is a template-of-sorts for building one-off tools that require the user to upload files and then have the app do something amazing with the aforementioned files. Like cssshrink.com or similar.
-
-http://phpied.com/fail for more info.
-
-https://phpied.com/files/fail for a demo.
\ No newline at end of file
+A creepy tool to raise awareness of the information people are sending voluntarily or not.
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 81e3352..d62b244 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,9 +1,9 @@
{
- "short_name": "fail",
- "name": "File API Input Layer",
+ "short_name": "Photo Geo",
+ "name": "Where was ths photo taken",
"icons": [
{
- "src": "fail-icon.png",
+ "src": "exif-icon.png",
"sizes": "192x192",
"type": "image/png"
}
diff --git a/package.json b/package.json
index dde50a4..ea2b2db 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
{
- "name": "fail",
- "version": "0.0.1",
+ "name": "exif",
+ "version": "1.0.0",
"private": true,
"devDependencies": {
+ "exifreader": "^2.0.1",
"react-scripts": "0.8.4",
"sw-precache": "^4.2.3"
},
diff --git a/public/exif-icon.png b/public/exif-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..eec7906d5dd7e5db9563326a8bc878d68955c7d2
GIT binary patch
literal 620
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE8Azrw%`pX1Q2{<7t}Mp?FI~Q||HvIJzn@bU
zKJA$CT-xQ&wQJXwZ+N(A=Y2W1-+K<+J#yl<iudnj>mTx3{o}L#ckt+KWv}1;^PXM1
zc75r(hbuNd+`9YTw8c-`roPy==bpOHF9Dl>T$cZK{Qtzuz`%Ic)5S5Q;?~=XC;gZm
z1y}+NPS3c?He2@Je{;)YtrI7Fo}i`qC?@M^@cfxb;O2sR^ItsPqAthxTPb1pg{PUn
z%}<xv3m*8#dQgSox1bNx26-@}2g-O^XwQA1jwRP&gS?}#z#I1qEG)kTO&AZ>vG@Xo
z4(2g5{B2yolu)mr!E{5Oql@7idy^7Khyz8)>cLE)7$ZoGq3JINS3`w;6Q9EU{sqh@
zzAL|A`1F@Us-eby@0(R1{dNz2S1sM%%9rhKUwWX*oI7@H9H)SSLjwaN6AK5ijE4VT
zw_5(+{n+XF)Y<1>OEu`dn;yJ-H*ehn&4hXe4XzvV3|&m$*c%o#{AFCAL0uuX49*+&
zoDB_sCo^zB7@I*1ZlDO5!PW3!>R-kKXOO_LFWmMkYiDhbeKrx8d>A}k{an^LB{Ts5
D$b$)4
literal 0
HcmV?d00001
diff --git a/public/favicon.ico b/public/favicon.ico
index 7fad314b6af978258bcb6de064e01c6ce41441d1..d1fa5b9c90434a096fe97cac7a661b657ac269d9 100644
GIT binary patch
delta 84
zcmeyz@sDGI_QZ7I#dge$llzzsOkT(MU~(U$p}Z#p`+q!mVx0j8On!11(-9UBXJVbh
H#03HX0KXkS
literal 1150
zcmds0K@NZ*46BI=M>u)*=nwpo|Np=&F($K_aM25pGPbT;SOPF{mja$Eju}`0Yy?A$
zTyYwJoG#m8f}}YuU$oZBjkv$`teYyLo<64iZ{3^q+IkQ4I?sncx?bPc^L2i`eC5B^
TYrWC^%pa>j=9C>guk$|vJhWA9
diff --git a/public/index.html b/public/index.html
index f230540..7fc7d72 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="shortcut icon" href="%PUBLIC_URL%/fail-icon.png">
+ <link rel="shortcut icon" href="%PUBLIC_URL%/exif-icon.png">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta name="theme-color" content="#222">
<!--
@@ -15,7 +15,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>FAIL</title>
+ <title>Where was this photo taken</title>
</head>
<body>
<!--
diff --git a/src/App.js b/src/App.js
index 11f973c..84a7e18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,10 @@
import React, { Component } from 'react';
import './App.css';
+const load = require('exifreader').load;
+
+const bing = 'http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/LATLONG/'+
+ '15?pp=LATLONG&mapSize=500,500'+
+ '&key=Ai_kb4YXmugLoiCy2Giijbk7My25iPiWt6YKREnN-Nvw9Ye9EiVcSjs2kI287_WB';
class App extends Component {
@@ -35,12 +40,30 @@ class App extends Component {
const data = this.state.data.slice();
files.forEach((f, idx) => {
if (!data[idx]) {
- const i = new Image();
- i.onload = () => {
- data[idx] = i.naturalWidth + 'x' + i.naturalHeight;
+ var reader = new FileReader();
+ reader.onload = (event) => {
+ try {
+ const tags = load(event.target.result);
+ const lat =
+ (tags.GPSLatitudeRef.value[0] === 'S' ? '-' : '') + tags.GPSLatitude.description;
+ const lon =
+ (tags.GPSLongitudeRef.value[0] === 'W' ? '-' : '') + tags.GPSLongitude.description;
+
+ data[idx] = {
+ mapUrl: bing.replace(/LATLONG/g, lat + ',' + lon),
+ time: tags.DateTimeOriginal.description,
+ latlon: {lat, lon},
+
+ };
+ } catch (_) {
+ data[idx] = {
+ mapUrl: '-1',
+ };
+ }
this.setState({data});
};
- i.src = window.URL.createObjectURL(f);
+ reader.readAsArrayBuffer(f.slice(0, 128 * 1024));
+
}
});
}
@@ -49,8 +72,8 @@ class App extends Component {
return (
<div className="App">
<div className="App-header">
- <h1>Upload me some images</h1>
- <p>pst, you can just drop them anywhere</p>
+ <h1>Photo stalker creep</h1>
+ <p>upload or drop some photos and see when and where they were taken</p>
</div>
<div className="Tool-in">
<Uploads onChange={this.handleUploads.bind(this)} />
@@ -82,18 +105,24 @@ const Results = ({files, data}) => {
return (
<table className="Results-table">
<tbody>
- <tr><th>Image</th><th>filename</th><th>bytes</th><th>mime</th><th>dimensions</th></tr>
+ <tr><th>what</th><th>when</th><th>where</th></tr>
{files.map((f, idx) => {
if (!f.type.startsWith('image/')) {
return null;
}
return (
<tr key={idx}>
- <td><img alt={f.name} src={window.URL.createObjectURL(f)} height="60" /></td>
- <td>{f.name}</td>
- <td>{f.size}</td>
- <td>{f.type}</td>
- <td>{data[idx] || '...'}</td>
+ <td><img alt={f.name} src={window.URL.createObjectURL(f)} width="300" /></td>
+ <td>{(data[idx] && data[idx].time) || '...'}</td>
+ <td>{
+ data[idx] && data[idx].mapUrl
+ ? data[idx].mapUrl === '-1'
+ ? 'Lucky you! No geo location in this file.'
+ : <a href={`http://maps.apple.com/?ll=${data[idx].latlon.lat},${data[idx].latlon.lon}&q=Photo taken here`}>
+ <img alt={JSON.stringify(data[idx].latlon)} src={data[idx].mapUrl} width="300" />
+ </a>
+ : '...'
+ }</td>
</tr>
);
})}
--
2.8.0-rc2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment