Ориентация изображения в формате Javascript EXIF и предварительный просмотр изображения
У меня есть входной файл 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>
Javascript
/* 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
Другие решения
Других решений пока нет …
detector