Javascript 如何处理iOS倒挂拍摄的问题

我在网站上使用一个输入字段，这样用户就可以拍照了

在iPad、iPhone上，生成的图片是颠倒的。我如何能够轻松地检测用户是否使用了摄像头，以便我通过Javascript旋转图像

之后，我在Javascript画布中使用该图片

我得到了这个输入字段：

<div class="input-field">
    <label>Choose image or take a picture :</label>
    >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

---

从哪个摄像头？前面还是后面？因为它们也不同，取决于你想从它们那里得到什么。我考虑了一下后摄像头

我创建了一些按钮，表示您必须为每个案例执行的操作：

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

演示如下：

---

我希望我能帮上忙：）

我设法用那些libs做了这件事（我脑子里没有链接，但搜索谷歌，那些特定的版本就行了）：

Javascript EXIF阅读器0.1.4

二进制Ajax 0.1.10

以下是完整的代码：

HTML:

<div class="input-field">
    <label>Choose image or take a picture :</label>
     <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

---

谢谢，但它是用javascript编写的，因为它是一个网站。啊，我明白了。可以在jQuery中吗？可以，我在项目中使用jQuery。这只是在前端旋转图像。但是当我将图像保存到服务器时，图像仍然是颠倒的。编辑得好。永远记住在你的问题中添加好的细节。（：可能的副本）

<div class="input-field">
    <label>Choose image or take a picture :</label>
     <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

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
}