从HTML5 FileApi加载的图像中检索EXIF图像元数据
Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?
我正在使用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插件。
当我使用加载函数时,我得到一个文件,它是原始 File 对象的扩展名。
on:
load: function(e, file) { }
但是如何从中检索EXIF元数据呢?
如果您未定义 EXIF,请使用 var EXIF = require('./exif.js');
FTW。
我设法让那只野兽在没有魔术的情况下工作(快速和肮脏的试错结果):
'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);
}
});
在 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);
});
这是解决方案:
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));
}
相关文章:
- 使用JSP从服务器检索和显示图像
- GoogleFeed正在检索图像
- 在Node.js中上传和检索图像
- 存储和检索图像数据URL
- Imgur|检索给定相册链接的直接图像URL
- 在检索数据时是否可以停止图像加载请求
- 如何检索从桌面应用程序发送到Rails API的图像
- 尝试显示使用 php 和数据库检索的缩略图中的全尺寸图像
- 如何使用Angular.js在页面上显示从JSON检索到的图像
- 如何在json对象中包含图像以及如何检索图像
- 图像高度只会从一大组图像中检索一次
- 如何检索通过CollectionFS:S3上传到AmazonS3的图像
- Parse.com-在JavaScript SDK中模板化集合时检索图像URL
- 如何使用javascript在缩略图中移动多个图像(从phpmyadmin检索)
- 如何转换从数据库中检索的 svg 源代码并将其显示为 html 中的图像
- 使用jQuery缩放后检索背景图像的大小
- 如何检索用户单击的图像的图像源?(jQuery)
- 使用jQuery's的ajax方法将图像检索为blob
- Node.js knox s3图像检索
- 使用Jquery和servlet进行的图像检索不显示图像