圖片旋轉90度拍攝時自拍

我不知道如何解釋這一點，但我會盡我所能。我有要求建立一個Web應用程序，用戶可以把他的照片上傳到服務器。當我嘗試在肖像或風景模式下拍攝自拍照並預覽時。圖像似乎旋轉了90度。圖片旋轉90度拍攝時自拍

我怎樣才能解決這個在預覽圖像的

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

的Onload我設置的圖片作爲背景的股利。

$('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/

嘗試採取自拍從您的手機或上傳了手機拍攝的一個PIC的鏈接（我用iphone進行測試）

來源

2016-01-13 whippits

似乎適合我......但我正在Mac上進行測試。 – michal

在相機旋轉是用來添加使用EXIF數據。有這個JS lib https://github.com/exif-js/exif-js但沒有文檔。 – jcubic

在相機旋轉通常使用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

該代碼沒有考慮到翻轉，因爲我不認爲他們曾經發生過使用相機，所有的方向標籤值可以在here找到。

來源

2016-01-13 15:58:01 jcubic

謝謝你..你拯救了這一天 – whippits

圖片旋轉90度拍攝時自拍

回答

相關問題