Javascript EXIF 图像方向和图像预览
Javascript EXIF Image Orientation and Image Preview
我有一个PHP文件输入和一些javascript,它显示了已选择上传的图像的小预览。我的问题是如何读取EXIF数据并以正确的方向显示(预览)图像?
PHP 文件输入
<div id="dropzone">
<div>Add Photo</div>
<?php echo elgg_view('input/file', array(
'name' => 'upload',
'accept' => 'image/jpeg, image/JPG, image/png',
)); ?>
</div>
爪哇语
/* Find any element which has a 'data-onload' function and load that to simulate an onload. */ $('[data-onload]').each(function(){ eval($(this).data('onload')); });
$(function() {
$('#dropzone').on('dragover', function() {
$(this).addClass('hover');
});
$('#dropzone').on('dragleave', function() {
$(this).removeClass('hover');
});
$('#dropzone input').on('change', function(e) {
var file = this.files[0];
$('#dropzone').removeClass('hover');
if (this.accept && $.inArray(file.type, this.accept.split(/, ?/)) == -1) {
return alert('File type not allowed.');
}
$('#dropzone').addClass('dropped');
$('#dropzone img').remove();
if ((/^image'/(gif|png|jpeg|JPG)$/i).test(file.type)) {
var reader = new FileReader(file);
reader.readAsDataURL(file);
reader.onload = function(e) {
var data = e.target.result,
$img = $('<img />').attr('src', data).fadeIn();
$('#dropzone div').html($img);
};
} else {
var ext = file.name.split('.').pop();
$('#dropzone div').html(ext);
}
});
});
您可以编写自己的 exif 解析算法,或使用现有的 js 库之一,例如 exif-js
fileToImage function(file, callback){
if(!file || !(/^image'/(gif|png|jpeg|jpg)$/i).test(file.type)){
callback(null);
return;
};
// for modern browsers and ie from 10
var createObjectURL = (window.URL || window.webkitURL || {}).createObjectURL || null;
var image = new Image();
image.onload = function(){
// exif only for jpeg
if(/^image'/(jpeg|jpg)$/i).test(file.type)){
var convertExifOrienationToAngle = function (orientation) {
var exifDegrees = [
0, // 0 - not used
0, // 1 - The 0th row is at the visual top of the image, and the 0th column is the visual left-hand side.
0, // 2 - The 0th row is at the visual top of the image, and the 0th column is the visual right-hand side.
180, // 3 - The 0th row is at the visual bottom of the image, and the 0th column is the visual right-hand side.
0, // 4 - The 0th row is at the visual bottom of the image, and the 0th column is the visual left-hand side.
0, // 5 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual top.
90, // 6 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual top.
0, // 7 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual bottom.
270 // 8 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual bottom.
];
if (orientation > 0 && orientation < 9 && exifDegrees[orientation] != 0) {
return exifDegrees[orientation];
} else {
return 0;
}
};
EXIF.getData(image, function() {
var angle = convertExifOrienationToAngle(EXIF.getTag(image, "Orientation") || 0);
var style = "-moz-transform: rotate(" + angle + "deg);-ms-transform: rotate(" + angle + "deg);-webkit-transform: rotate(" + angle + "deg);-o-transform: rotate(" + angle + "deg);transform: rotate(" + angle + "deg);";
image.setAttribute("style", style);
callback(image);
});
}else{
callback(image);
}
};
image.onerror = image.onabort = function(){
callback(null);
};
if(createObjectURL){
image.src = createObjectURL(file);
}else{
var reader = new FileReader(file);
reader.onload = function(e) {
image.src = e.target.result
};
reader.onerror = reader.onerror = function(){
callback(null);
};
reader.readAsDataURL(file);
} }
使用示例:
fileToImage(file,function(image){
if(image != null){
document.body.appendChild(image)
}else{
alert("can't load image");
}
});
你也可以使用这篇文章中的方法在没有 lib 的情况下获取方向
相关文章:
- 使用javascript根据图像的布局方向为图像添加不同的类名
- 根据调整大小的方向显示不同的图像
- 上传修复上传时的图像方向
- 在javascript中检测图像的EXIF方向
- 通过单击方向按钮在容器内移动图像
- 基于移动方向的图像高度
- 使用 Jquery 同时向不同方向移动多个图像
- Javascript EXIF 图像方向和图像预览
- 使用readAsDataURL检索原始图像时的图像方向
- 如何在两个方向上旋转图像90
- jQuery悬停在图像上,一个方向运行良好,另一个方向跳动
- CSS/Javascript解决方案,可根据图像方向自动应用高度/宽度属性
- 如何动画图像&从右到左改变方向
- 滚动,在方向改变时翻转图像
- 根据当前选择的图像使用方向键移动灯箱图像
- JQuery图像旋转动画,工作在一个方向,而不是另一个
- 使图像面移动方向html
- 在相反的方向上旋转两个图像
- 在圆形方向上移动图像的
- 使用CSS3根据鼠标位置平移图像方向