javascript - How to deal with iOS taking upside down picture - Stack Overflow

admin管理员组

文章数量:1427810

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]);
}

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]);
}

• javascript
• ios
• iphone
• ipad
• canvas

Share Improve this question Follow edited Jul 10, 2014 at 13:48 arlg asked Jul 10, 2014 at 12:15 arlgarlg 1,13833 gold badges1616 silver badges3434 bronze badges 2

• Good edit. Always remember to add good detail to your questions. (: – Neeku Commented Jul 10, 2014 at 14:25
• Possible duplicate of JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images – la.urin Commented Jul 9, 2018 at 13:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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
}

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/s6zSn/382/

I hope i could help :)

本文标签： javascriptHow to deal with iOS taking upside down pictureStack Overflow