HTML / Javascript在文件上传前访问EXIF数据 [英] HTML/Javascript Access EXIF data before file upload

问题描述

我试图从被拖入浏览器的图像（jpeg）中提取 EXIF 数据，或者通过html文件输入元素选择

我设法使用 FileReader和FileReader.readAsDataURL
在浏览器中预览图片，如这里。 //blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.htmlrel =nofollow noreferrer> EXIF库，它允许通过JavaScript提取图像的EXIF数据。但是对我来说，只有当我用它和普通的 img 标签一起使用它们来加载它们的内容时，它才会起作用。

我还发现这个问题 StackOverflow在接受的答案表明，这是不可能的。

但是我很确定它可以实现，因为 500px.com 在上传完成后，上传完成之前，立即提取EXIF数据。

有一些想法应该如何从我从FileReader获得的base64编码图像中提取EXIF数据？

1. 阅读使用的文件 FileReader 和方法 .readAsBinaryString


2. 然后将该二进制字符串已经包含在 EXIF库中的BinaryFile对象


3. 最后调用 EXIF.readFromBinaryFile（binaryFileObject）;

及其完成：）

I am trying to extract EXIF data from a image(jpeg) which has been dragged into the browser or has been selected via a html file input element.

I managed to preview the image within the browser using FileReader and FileReader.readAsDataURL as described here.

and I found a EXIF library which allows to extract the EXIF data of an image via javascript. But for me it only works if I use it with normal img tags which load their content over a URL.

I also found this question on StackOverflow where the accepted answer states that it is just not possible.

But I am pretty sure that it can be realized because 500px.com extracts the EXIF data immediately after a file is added for upload and before the upload has been finished.

Some ideas how it should be possible to extract the EXIF data from the base64 encoded image I get from the FileReader?

解决方案

I finally found a client side solution for the problem:

1. Read the file using the FileReader and the method .readAsBinaryString
2. Then wrap that binary string into a BinaryFile object which is already included in the EXIF Library
3. Finally call EXIF.readFromBinaryFile(binaryFileObject);

and its done :)

这篇关于HTML / Javascript在文件上传前访问EXIF数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！