JSFiddle - React, Tailwind, and code Playground
HTML
Picture: <input type="file">
<hr>
<div>
Original
<img>
</div>
<div>
Rotated
<img>
</div>
<hr>
Log...
<span></span>
CSS
div{
display:none;
}
img{
display:block;
height:100px;
width:100px;
}
JavaScript
'use strict';
var original = document.querySelectorAll('img')[0];
var rotated = document.querySelectorAll('img')[1];
var span = document.querySelector('span');
document.querySelector('input').addEventListener('change', function(event){
log('File changed', true);
var file = event.target.files[0];
if(file === undefined){
original.parentElement.style.display = 'none';
rotated.parentElement.style.display = 'none';
log('No file selected');
return;
}
getOrientation(file, showImage);
});
// Based on: https://stackoverflow.com/a/32490603/5503625
function getOrientation(file, callback) {
log('getOrientation()');
if(!window.FileReader){
return log('FileReader is not supported');
}
if(!window.FileReader.prototype.readAsArrayBuffer){
return log('readAsArrayBuffer is not supported');
}
var reader = new FileReader();
reader.onload = function(e) {
if(!window.DataView){
return log('DataView is not supported');
}
if(!window.DataView.prototype.getUint16){
return log('getUint16 is not supported');
}
if(!window.DataView.prototype.getUint32){
return log('getUint32 is not supported');
}
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(file, -2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(file, -1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(file, view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
...