采取自拍时,图像旋转90度

Question

我不知道如何解释这个,但我会尽我所能.我需要构建一个Web应用程序,用户可以在其中拍摄他的照片并上传到服务器.当我尝试在肖像或横向模式下拍照并预览它.图像似乎旋转了90度.

如何在预览图像时解决此问题

 <input type="file">
 <div class="preview-nodeCenter nodeCenter fadeChange">
 </div>

Onload我将图像设置为div的背景.

$('input').change(function() {
    var fr = new FileReader;
    fr.onload = function() { 
        var data = fr.result;
        $( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
        //img.src = fr.result;
    };
    fr.readAsDataURL(this.files[0]);
});

这是链接到小提琴http://jsfiddle.net/vh9ecjej/1/

尝试从手机拍照或上传手机拍摄的照片(我用iphone进行测试)

Answer 1

在摄像机中,旋转通常使用EXIF数据完成,您可以将exif-js库与此代码一起使用:

$('input').change(function() {

    var fr = new FileReader;
    fr.onload = function() { 
        var data = fr.result;
        var node = $( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
         var image = new Image();
         image.src = data;
         image.onload = function() {
           EXIF.getData(image, function() {
              var orientation = EXIF.getTag(this, "Orientation");
              switch(orientation) {
                case 3:
                  node.css('transform', 'rotate(180deg)');
                  break;
                case 6:
                  node.css('transform', 'rotate(90deg)');
                  break;
                case 8:
                  node.css('transform', 'rotate(-90deg)');
                  break;
              }
          });
        };

        //img.src = fr.result;
    };

    fr.readAsDataURL(this.files[0]);

});

的jsfiddle

代码没有考虑翻转,因为我认为它们不会发生使用相机,所有Orientation标签值都可以在这里找到.