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 library：

$('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标记值here。

拍照时，图像旋转90度

1 个答案: