javascript 从 HTML5 FileApi 加载的图像中检索 EXIF 图像元数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18981555/
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
Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?
提问by confile
I am using the HTML5 File API & FileReader.
我正在使用 HTML5文件 API 和 FileReader。
HTML:
HTML：
<div id="holder"></div>
JS:
JS：
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
};
</script>
How can I retrieve EXIF meta data from the uploaded image?
如何从上传的图像中检索 EXIF 元数据？
I tried to use this.
我试着用这个。
HTML:
HTML：
<img src="image1.jpg" id="img1" exif="true" />
JS:
JS：
console.log($("#img1").exifPretty());
This only returns an empty set.
这只会返回一个空集。
I also use the FileReader JQuery Plugin.
我还使用FileReader JQuery 插件。
When I use the load function I get a file which is an extension of the original File object.
当我使用 load 函数时，我得到一个文件，它是原始 File 对象的扩展。
on:
load: function(e, file) { }
But how do I retrieve the EXIF meta data from it?
但是如何从中检索 EXIF 元数据呢？
采纳答案by confile
This is the solution:
这是解决方案：
on:
load: function(event, file) {
// get image meta data
var base64 = event.target.result.replace(/^.*?,/,'');
var binary = atob(base64);
var exif = EXIF.readFromBinaryFile(new BinaryFile(binary));
}
回答by Thomas Praxl
If you're getting EXIF undefined, then use var EXIF = require('./exif.js');FTW.
如果您的 EXIF 未定义，请使用var EXIF = require('./exif.js');FTW。
I managed to get that beast working without magic tricks (quick&dirty trial&error result):
我设法让那头野兽在没有魔术的情况下工作（快速&肮脏的试验&错误结果）：
'use strict';
var EXIF = require('./exif.js');
$(function() {
$('#fileinput').on('change', function(){
var files = this.files,
i=0;
for(i=0; i<files.length;++i){
previewImage(this.files[i]);
}
});
function previewImage(file) {
var gallery = $('#gallery'),
thumb = null,
img = null,
reader= null;
if(!file.type.match('image/*')){
throw 'File type must be an image';
}
thumb = $('<div />',{class: 'thumbnail'}).appendTo(gallery);
img = $('<img />');
reader = new FileReader();
reader.onload = function(e){
img.prop('src',reader.result);
// important for exif-js! Set src attribute after calling img.prop
img.src = img.prop('src');
img.appendTo(thumb);
EXIF.getData(img, function() {
console.log(EXIF.pretty(img));
});
};
reader.readAsDataURL(file);
}
});
回答by chings228
with help of exif.js , the following script can get the exif from file input
在 exif.js 的帮助下，以下脚本可以从文件输入中获取 exif
$('#imageupload').change(function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var exif = EXIF.readFromBinaryFile(this.result);
console.log(exif);
}
reader.readAsArrayBuffer(file);
});
