Загруженный с мобильного телефона в Angular боком или с ног на голову

Question

Я могу загружать изображения с рабочего стола на веб-приложение с угловым основанием, наложенное на SharePoint без проблем, но если я загружу с мобильного телефона, например iPhone, используя функцию «Фотосъемка или видео» или «Фотобиблиотека», это приводит к тому, что изображение становится боковым, если его снимать в портретном или перевернутом виде, когда он сделан в ландшафте. Вот моя текущая функция загрузки. Любые подсказки/у других были одинаковые проблемы с загрузкой в ​​мобильные веб-приложения с iPhones/Mobile Phones в библиотеку SharePoint?

Вот моя функция загрузки:

// 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); 
     } 

Выход из них просто толкнул в массив для использования в угловых Carousel 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> 

ВАЖНО: изображение s боком и вверх ногами при загрузке в библиотеку SharePoint, поэтому, независимо от вывода их, они, похоже, разориентированы, когда они попадают в целевую библиотеку, которую я использую в качестве источника для отображения на странице.

Как загрузить изображения, чтобы SharePoint уважал данные/ориентацию EXIF?

Answer 1

Это может быть связано с 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.