文件上传前 HTML/Javascript 访问 EXIF 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10341685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/Javascript Access EXIF data before file upload
提问by alex
I am trying to extract EXIFdata from a image(jpeg) which has been dragged into the browser or has been selected via a html file input element.
我正在尝试从已拖入浏览器或通过 html 文件输入元素选择的图像（jpeg）中提取EXIF数据。
I managed to preview the image within the browser using FileReader and FileReader.readAsDataURLas described here.
我设法使用此处FileReader and FileReader.readAsDataURL所述在浏览器中预览图像。
and I found a EXIF librarywhich allows to extract the EXIF data of an image via javascript. But for me it only works if I use it with normal imgtags which load their content over a URL.
我找到了一个EXIF 库，它允许通过 javascript 提取图像的 EXIF 数据。但对我来说，它只有在我将它与img通过 URL 加载其内容的普通标签一起使用时才有效。
I also found this questionon StackOverflow where the accepted answer states that it is just not possible.
我还在StackOverflow 上发现了这个问题，其中接受的答案指出这是不可能的。
But I am pretty sure that it can be realized because 500px.comextracts the EXIF data immediately after a file is added for upload and before the upload has been finished.
但我很确定它是可以实现的，因为500px.com在添加文件进行上传后和上传完成之前立即提取 EXIF 数据。
Some ideas how it should be possible to extract the EXIF data from the base64 encoded image I get from the FileReader?
一些想法应该如何从我从 FileReader 获得的 base64 编码图像中提取 EXIF 数据？
回答by alex
I finally found a client side solution for the problem:
我终于找到了该问题的客户端解决方案：
- Read the file using the
FileReaderand the method.readAsBinaryString - Then wrap that binary string into a BinaryFile object which is already included in the EXIF Library
- Finally call
EXIF.readFromBinaryFile(binaryFileObject);
- 使用
FileReader和 方法读取文件.readAsBinaryString - 然后将该二进制字符串包装成一个已包含在EXIF 库中的 BinaryFile 对象
- 最后打电话
EXIF.readFromBinaryFile(binaryFileObject);
and its done :)
它完成了:)
回答by Nasser Al-Wohaibi
jQuery-fileExifjavascript library reads image exif data before upload.
GitHub link, example jsfiddlefrom the library.
jQuery-fileExifjavascript 库在上传前读取图像 exif 数据。
GitHub 链接，库中的示例jsfiddle。
var someCallback = function(exifObject) {
$('#cameraModel').val(exifObject.Model);
$('#lat').val(exifObject.GPSLatitude);
$('#lng').val(exifObject.GPSLongitude);
// Uncomment the line below to examine the
// EXIF object in console to read other values
//console.log(exifObject);
}
try {
$('#file').change(function() {
$(this).fileExif(someCallback);
});
}
catch (e) {
alert(e);
}
回答by ThiefMaster
Have a look at the code of the FxIF firefox extension. It reads exif data using only JavaScript. To read the file contents, you can use the FileReader APIof modern browsers.
看看FxIF firefox 扩展的代码。它仅使用 JavaScript 读取 exif 数据。要读取文件内容，您可以使用现代浏览器的FileReader API。
