如何处理iOS拍摄颠倒图片

Question

我在网站上使用输入字段，以便用户可以自己拍照。

在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> 

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

Answer 1

我能够做到它使用这些库（我没有在我心中的链接，但搜索谷歌，这些特定版本只是工作）：

1. 的Javascript EXIF阅读器0.1.4
2. 二进制阿贾克斯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> 

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 
} 

Answer 2

从中相机？前面还是后面？因为他们也不一样，并且取决于你想从他们那里得到什么。我考虑过后置摄像头。

我创建了一些按钮，代表你对每一种情况下该怎么做：

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

演示是在这里：http://jsfiddle.net/s6zSn/382/

我希望我能帮助:)