光电蠕变

最新推荐文章于 2024-09-15 09:47:04 发布

cunbei2644

最新推荐文章于 2024-09-15 09:47:04 发布

阅读量169

点赞数

文章标签： java 人工智能 javascript 计算机视觉大数据 ViewUI

原文链接：https://www.phpied.com/photocreep/

版权

There's a new tool in town. It lets you drag photos and gives you a map of where the photo was taken. Creepy, isn't it? It figures this out using the meta (exif) information that's part of a photo.

镇上有一种新工具。它可以让您拖动照片并为您提供照片拍摄地的地图。令人毛骨悚然，不是吗？它使用照片的meta(exif)信息来解决这一问题。

The tool also lets you download a version of the photo without any exif information.

该工具还可以让您下载没有任何exif信息的照片版本。

动机(Motivation)

Raise awareness of the information people may be sharing involuntarily when they snap a photo on their phones and send it to others.

当人们在手机上拍摄照片并将其发送给他人时，提高人们对这些信息的认识。

实作 (Implementation)

The photocreep tool was built on top of FAIL which lets you build tools like this easily. Tools built with FAIL are PWAs that work offline too. FAIL is built on top of create-react-app which lets you build apps quickly. create-react-app is built on top of React which lets you build UIs in a way that makes sense. To get started with React go get my book. React was built on top of JavaScript which is a programming language that lets you build applications on top of documents on the Web. The Web is built on top of... 🙂

光电爬行工具建立在FAIL之上，可让您轻松构建此类工具。使用FAIL构建的工具也是可以脱机工作的PWA。 FAIL建立在create-react-app之上，可让您快速构建应用。 create-react-app是在React之上构建的，它使您可以以有意义的方式构建UI。要开始使用React，请阅读我的书。 React是在JavaScript之上构建的，JavaScript是一种编程语言，可让您在Web文档的顶部构建应用程序。 Web建立在...的顶部

FAIL does not (yet) generate new projects but getting started is kinda trivial. Here's the diff that got me to initial working Photocreep.

FAIL(尚未)还没有生成新项目，但是入门很简单。这里的差异是拉去初始工作Photocreep。

The heavy lifting of reading EXIF data is done by exifreader.

读取EXIF数据的繁重工作由exifreader完成。

The writing of the file without EXIF data is done by rendering the photo into a canvas, then using toDataURL() that only gives you the pixels, without any meta.

没有EXIF数据的文件写入是通过将照片渲染到canvas ，然后使用仅提供像素而不带任何元数据的toDataURL()来完成的。

function download(idx, file) {
  const a = document.createElement('a');
  a.download = file.name;
  a.href = document.getElementById('image' + idx).toDataURL(file.type);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Btw to convert img to a canvas, you can go like:

顺便说一句将img转换为canvas ，您可以像这样：

<img src="file.jpg" onload="toCanvas()">

function toCanvas(img) {
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const context = canvas.getContext('2d');
  context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
  img.parentNode.replaceChild(canvas, img);
}

One more mildly interesting bit is that I needed to convert some of the Lat/Long coordinates (namely West and South) to add a - so I can provide the values Bing/Apple/Any map expects.

还有一点有趣的地方是，我需要转换一些纬度/经度坐标(即西和南)以添加-因此我可以提供Bing / Apple / Any地图期望的值。

const lat = (tags.GPSLatitudeRef.value[0] === 'S' ? '-' : '') + tags.GPSLatitude.description;
const lon = (tags.GPSLongitudeRef.value[0] === 'W' ? '-' : '') + tags.GPSLongitude.description;

Mac的其他工具(Other tools for Mac)

(I'm sure similar tools exist for other platforms, I just don't know them)

(我确定其他平台也存在类似的工具，但我只是不知道)

Open a photo with Preview. Press ⌘I (as in Info). Explore the ⓘ tab, then Exif and GPS sub-tabs. Note the handy little "Remove location info" button.

使用预览打开照片。按⌘I(如Info所示)。浏览ⓘ标签，然后浏览Exif和GPS子标签。请注意方便的小“删除位置信息”按钮。

Another (less powerful, but maybe quicker) thing is to right-click "Get Info" in Finder and see "More info"

另一件事(功能较弱，但可能更快)是在Finder中右键单击“获取信息”，然后查看“更多信息”

React (Reactions)

I tweeted yesterday about the tool. Interesting responses.

我昨天在推特上介绍了该工具。有趣的回应。

The amazing Kornel (creator of aforementioned ImageOptim) warns about a potential privacy leak with converting a canvas to an image. Fix it, Chrome!

令人惊讶的Kornel(上述ImageOptim的创建者)警告将画布转换为图像可能会导致隐私泄漏。修复它，Chrome！

The extraordinary Mr.Heilmann mentioned he's done the same canvas-to-image meta stripping in his http://removephotodata.com/.

非凡的海尔曼先生提到，他在http://removephotodata.com/中完成了相同的画布到图像元剥离。

The unstoppable fiddler Eric Lawrence bemoans the size of the files generated by Canvas-to-file. I compared a photo taken by iPhone before and after the conversion.

不可阻挡的提琴手埃里克·劳伦斯(Eric Lawrence)惊叹于“画布到文件”生成的文件大小。我比较了转换前后iPhone拍摄的照片。

The "after" result is smaller. This is because iPhone jpegs are not optimized to begin with. So - win. Then if you upload an optimized file (ideally through jpegtran/imageoptim) the meta is not there, so no "clean" file is generated either. So - non-lose. The problem is when you upload an optimized photo that still maintains meta. For this case and in general (fast by default!) I'll look into integrating an optimizer in JS-land. LMK if you know anything good. Initial search shows a promising emscripten-made mozjpeg-js npm package.

“之后”结果较小。这是因为iPhone jpeg并非一开始就经过优化。所以-赢。然后，如果您上传优化文件(最好通过jpegtran / imageoptim)，则该meta不存在，因此也不会生成“干净”文件。所以-不输。问题是当您上传仍保留元数据的优化照片时。对于这种情况，通常(默认情况下是快速的！)，我将研究在JS-land中集成优化器。 LMK，如果您知道什么都好。初步搜索显示了有前途的脚本制作的mozjpeg -js npm软件包。

And finally, the greatest result came from a reaction by Jordan (of React fame) ended up with a bug filed by none other than Brenden Eich to make the Brave browser strip location meta by default. Awesome! Other browser vendors - please follow 🙂

最后，最大的结果来自约旦(React名望)的React，结果是一个由Brenden Eich提交的错误，该错误默认情况下使Brave浏览器地带位置meta 。太棒了！其他浏览器供应商-请遵循🙂

@2D3DUXD @jordwalke @thejameskyle @brave @stoyanstefanov @jkup https://t.co/lV5FkpgzwB filed.

@ 2D3DUXD @jordwalke @thejameskyle @brave @stoyanstefanov @jkup https://t.co/lV5FkpgzwB申请。

— BrendanEich (@BrendanEich) January 21, 2017

— BrendanEich(@BrendanEich) 2017年1月21日