圖片顯示在iPad上旋轉而不在筆記本上

我創建了一個小型測試網站，您可以在其中上傳圖片。如果沒有後端往返，則顯示所選圖片。到目前爲止沒有什麼非常有趣的東西圖片顯示在iPad上旋轉而不在筆記本上

$('input').on('change', function() { 
    var file = this.files[0]; 

    var reader = new FileReader(); 
    reader.onload = function (event) { 
     var base64 = event.target.result; 
     $('<img>').attr('src', base64).appendTo('body'); 
    }; 
    reader.readAsDataURL(file); 
});

但是，我注意到在我的iPad3上有些圖片是倒轉顯示的。我在google上找到了存儲在定義圖片方向的圖像（base64）中的EXIF元數據。但另一件事是，在我的筆記本電腦上圖像顯示正常（當然有相同的圖片）。有什麼辦法可以防止/修復這種行爲嗎？（我希望他們以同樣的方式顯示圖片，並且如果可能我還希望它們顯示正常（而不是倒置））

來源

2013-12-16 Jeanluca Scaljeri

這不是CSS問題。這實際上是一個圖像問題。一些瀏覽器通過元數據解釋圖像的方向。只需在任何圖像編輯軟件中打開圖像並將其導出即可。上傳到您的服務器，讓我知道，如果工作！

編輯 - 參考此URL一個可能的解決方案： Accessing JPEG EXIF rotation data in JavaScript on the client side

來源

2013-12-16 22:20:29

在我來說，我想上傳一張照片，顯示它的預覽。在移動設備上，您可以選擇製作新照片或現有照片。所以很難指望有人做所有的預處理。有趣的是，當圖像被畫在畫布上時，原始方向會返回 –

這可能有所幫助：http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the -client-side < - 使用JavaScript檢測EXIF數據並相應定位。 –

圖片顯示在iPad上旋轉而不在筆記本上

回答

相關問題