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

问题描述

我正在尝试从已拖入浏览器或通过 html 文件输入元素选择的图像 (jpeg) 中提取 EXIF 数据.

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.

我设法使用 FileReader 和 FileReader.readAsDataURL 在浏览器中预览图像如此处所述.

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

我发现了一个 EXIF 库 允许通过 javascript 提取图像的 EXIF 数据.但对我来说，它只有在我将它与通过 URL 加载其内容的普通 img 标签一起使用时才有效.

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.

我还发现了这个问题 在 StackOverflow 上，接受的答案指出这是不可能的.

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

但我很确定它是可以实现的，因为 500px.com 会在文件加载后立即提取 EXIF 数据添加用于上传并且在上传完成之前.

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.

关于如何从我从 FileReader 获得的 base64 编码图像中提取 EXIF 数据的一些想法?

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. 使用FileReader 和.readAsBinaryString 方法读取文件
2. 然后将该二进制字符串包装到一个 BinaryFile 对象中，该对象已包含在 EXIF 库
3. 最后调用EXIF.readFromBinaryFile(binaryFileObject);

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);

它完成了:)

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