How to deal with iOS taking upside down picture

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 ?

  • Overlap/hit test in javascript
  • Drawing a circle using mouse position
  • canvas in a div with display none does not work
  • Calling Superclass Method From Subclass - JavaScript
  • HTML Canvas Interval vs RequestAnimationFrame
  • What's the difference between $document and $window.document in Angular?
  • 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]);
    }
    

  • What is the best way, to draw a part of an arraybuffer to the canvas?
  • how can i rotate a shape in canvas,html5?
  • Changing Resolution of HTML Canvas
  • Canvas: When animating the drawing of a circle, how to avoid gaps between line segments?
  • Performance: CSS3 animations vs. HTML5 Canvas
  • Do some transforms apply to text and not rectanges?
  • 2 Solutions collect form web for “How to deal with iOS taking upside down picture”

    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 🙂

    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
    }