从HTML5 FileApi加载图像中检索EXIF图像元数据？ [英] Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?

问题描述

我正在使用HTML5 File API&的FileReader 。

I am using the HTML5 File API & FileReader.

HTML：

<div id="holder"></div> 

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>

如何从上传的图片中检索EXIF元数据？

我试图使用这个。

HTML：

<img src="image1.jpg" id="img1" exif="true" />

JS：

console.log($("#img1").exifPretty());

这只返回一个空集。

我还使用 FileReader JQuery插件。

当我使用load函数时，我得到一个文件，它是原始File对象的扩展名。

When I use the load function I get a file which is an extension of the original File object.

on:
    load: function(e, file) { }

但如何从中检索EXIF元数据？

推荐答案

这是解决方案：

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

这篇关于从HTML5 FileApi加载图像中检索EXIF图像元数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！