從手機上傳到Angular的圖像橫向或倒掛

我能夠將圖像從我的桌面上傳到基於Angular的Web應用程序，覆蓋SharePoint，沒有問題，但是如果我從iPhone等移動電話上傳，使用「拍攝照片或視頻」或「照片庫」功能時，拍攝時縱向拍攝或倒置拍攝時會導致圖像橫向拍攝。這是我目前的上傳功能。任何線索/有其他人有相同的問題上傳到移動Web應用程序從iPhone /移動電話到SharePoint庫？從手機上傳到Angular的圖像橫向或倒掛

這裏是我的上傳功能：

// Upload of images 
    $scope.upload = function() { 
     //console.log($scope.files); 
      if (document.getElementById("file").files.length === 0) { 
       alert('No file was selected'); 
       return; 
      } 
      var parts = document.getElementById("file").value.split("\\"); 
      var uploadedfilename = parts[parts.length - 1]; 
      var basefilename = uploadedfilename.split(".")[0]; 
      var fileextension = uploadedfilename.split(".")[1]; 
      var currentdate = new Date(); 
      var formatteddate = $filter('date')(new Date(currentdate), 'MMddyy-hmmssa'); 
      var filename = basefilename + formatteddate + '.' + fileextension; 
      var file = document.getElementById("file").files[0]; 
      uploadFileSync("/sites/asite", "Images", filename, file); 
     } 

     //Upload file synchronously 
    function uploadFileSync(spWebUrl, library, filename, file) 
    { 
      console.log(filename); 

      var reader = new FileReader(); 
      reader.onloadend = function(evt) 
      { 
       if (evt.target.readyState == FileReader.DONE) 
       { 
        var buffer = evt.target.result; 
        var completeUrl = spWebUrl 
         + "/_api/web/lists/getByTitle('"+ library +"')" 
         + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?" 
         + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'"; 

        $.ajax({ 
         url: completeUrl, 
         type: "POST", 
         data: buffer, 
         async: false, 
         processData: false, 
         headers: { 
          "accept": "application/json;odata=verbose", 
          "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
          "content-length": buffer.byteLength 
         }, 
         complete: function (data) {  
          console.log(data); 
         }, 
         error: function (err) { 
          alert('failed'); 
         } 
        }); 

       } 
      }; 
      reader.readAsArrayBuffer(file); 
     }

這些輸出只是推到一個數組用在角UI旋轉木馬：

// Control of Image Carousel 
    $scope.myInterval = 0; 

// Population of carousel 
$scope.slides = []; 

    appImages.query({ 
     $select: 'FileLeafRef,ID,Created,Title,UniqueId', 
     $filter: 'ReportId eq ' + $routeParams.Id + ' and DisplayinReport eq 1', 
    }, function (getimageinfo) { 
     // Data is within an object of "value" 
     var image = getimageinfo.value; 

     // Iterate over item and get ID 
     angular.forEach(image, function (imagevalue, imagekey) { 

      $scope.slides.push({ 
       image: '/sites/asite/Images/' + imagevalue.FileLeafRef, 
      }); 
     }); 
    });

的圖片輪播的是頁面上進行如下：

<div style="height: 305px; width: 300px"> 
       <carousel interval="myInterval"> 
        <slide ng-repeat="slide in slides" active="slide.active"> 
         <img ng-src="{{slide.image}}" style="margin:auto;height:300px"> 
         <div class="carousel-caption"> 
          <h4>Slide {{$index}}</h4> 
          <p>{{slide.text}}</p> 
         </div> 
        </slide> 
       </carousel> 
      </div>

重要：圖像當上傳到SharePoint庫時，它們是橫向和顛倒的，所以無論如何輸出它們，當它們碰到目標庫時，它們似乎都是錯誤的方向，我用它作爲源顯示在頁面上。

如何上傳圖像以便SharePoint遵守EXIF數據/方向？

來源

2015-06-22 Kode

你在使用服務器端？ –

它可能與EXIF有關。請參閱JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

如果您想要更好的答案，我們需要顯示圖像的代碼和代碼服務器端。

更新：我在SharePoint上不是專家，但是您可以在SharePoint Stack Exchange中找到很多關於它的知識。例如，https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library，應該做的伎倆。

總結一下：在你的情況下，他們可能是很多案例研究。所以，我建議你自動修正exif，然後允許你的用戶糾正它，如果自動更正是錯誤的。他們有很多工具可以做到這一點。如果你想在服務器端做到這一點，看看上面的鏈接，如果你想在客戶端做到這一點，你可以使用例如JS-Load-Image。

來源

2015-06-22 17:50:01 noelmace

它正在上傳到SharePoint圖像庫。所以我不確定如何最好地表現出來。 – Kode

請更新您的帖子，並提及它也是關於SharePoint（也是標籤）。我用這些信息更新了我的答案。 – noelmace

我已更新我的帖子，並正在調查EXIF。偉大的見解。 – Kode

從手機上傳到Angular的圖像橫向或倒掛

回答

相關問題