How to deal with iOS taking upside down picture
canvas, ios, ipad, iphone, javascript
Solution
I managed to do it using those libs ( I don't have the links in my mind but search google, those specific versions just works ):
- Javascript EXIF Reader 0.1.4
- Binary Ajax 0.1.10
Heres the full code :
HTML :
<div class="input-field">
<label>Choose image or take a picture :</label>
<input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>
JS :
var imageLoader, _isUpsideDown = false;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);
function _handleImage( e ){
var reader = new FileReader();
reader.onload = function(event){
picture.onload = function(){
// Launch Canvas, display image, etc...
doStuff();
};
picture.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
// Second file reader which will read the file as binaryString to detect the orientation.
var file = this.files[0]; // file
filereaderString = new FileReader; // to read file contents
filereaderString.onloadend = function() {
// get EXIF data
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
// the 3 value means that the image is upside down. 1 is when the image is correct size.
if( exif.Orientation === 3 ){
_isUpsideDown = true;
}
};
filereaderString.readAsBinaryString(file); // read the file
}
Problem
I use an input field on a website so that a user can take himself into photo. On iPad, iPhone, the resulting picture is upside down. How can I easily detect if the user used the camera so that I rotate the image via Javascript ? I use the picture in a Javascript Canvas after. I got this input field : ``` <div class="input-field"> <label>Choose image or take a picture :</label> >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/> </div> ``` And in JS : ``` var imageLoader; imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', _handleImage, false); function _handleImage( e ){ var reader = new FileReader(); reader.onload = function(event){ picture.onload = function(){ // The image here is upside down :( I want to turn it to 180 degrees here do_stuff( ); }; picture.src = event.target.result; }; reader.readAsDataURL(e.target.files[0]); } ```