5

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]);
}
arlg
  • 1,128
  • 3
  • 16
  • 34
  • Good edit. Always remember to add good detail to your questions. (: – Neeku Jul 10 '14 at 14:25
  • Possible duplicate of [JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images](https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images) – la.urin Jul 09 '18 at 13:43

2 Answers2

3

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 ):

  1. Javascript EXIF Reader 0.1.4
  2. 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
}
arlg
  • 1,128
  • 3
  • 16
  • 34
2

From which camera? front or rear? Because they are different too and depends what you want from them. I considered the rear camera.

I created some buttons representing what you have to do for each case:

var angle = 0;
$('#portraitButton').on('click', function() {
    angle = 90;
    $("#picture").rotate(angle);
});

$('#landscapeLeft').on('click', function() {
    angle = 180;
    $("#picture").rotate(angle);
});

$('#landscapeRight').on('click', function() {
    angle = 180;
    $("#picture").rotate(angle);
});

$('#upsideDown').on('click', function() {
    angle = -90;
    $("#picture").rotate(angle);
});

The demo is here: http://jsfiddle.net/s6zSn/382/

I hope i could help :)

Ricardo Anjos
  • 1,417
  • 18
  • 22