L'immagine caricata dal cellulare verso Angular è di lato o capovolta

Question

Sono in grado di caricare immagini dal mio desktop su un'applicazione Web basata su Angular sovrapposta su SharePoint senza problemi, ma se carico da un telefono cellulare, come un iPhone, utilizzando la funzione "Scatta foto o video" o "Libreria foto", fa sì che l'immagine sia di lato quando viene scattata in verticale o capovolta quando viene scattata in orizzontale. Ecco la mia attuale funzione di caricamento. Eventuali indizi/altri hanno avuto gli stessi problemi di caricamento su applicazioni Web mobili da iPhone/telefoni cellulari in una raccolta di SharePoint?

Qui è la mia funzione di upload:

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

L'uscita di questi è solo spinto in un array per l'uso in angolare UI Carousel:

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

La giostra immagine è sulla pagina come segue :

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

IMPORTANTE: L'immagine s sono di traverso e capovolti dopo il caricamento nella libreria di SharePoint, quindi indipendentemente dall'emissione di questi, sembrano essere disorientati quando colpiscono la libreria di destinazione che sto usando come sorgente da visualizzare sulla pagina.

Come caricare le immagini in modo che SharePoint rispetti i dati/l'orientamento EXIF?

Answer 1

Potrebbe essere correlato a EXIF. Vedi JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Se si desidera una risposta migliore, avremo bisogno del codice che mostra l'immagine e il lato del codice server.

AGGIORNAMENTO: Non sono affatto un esperto su SharePoint, ma ne potete trovare molte informazioni nello Stack Stack di SharePoint. Ad esempio, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library, dovrebbe fare il trucco.

Per riassumere un po ': nel tuo caso, potrebbero essere molti casi da studiare. Quindi, ti ho raccomandato di correggere automaticamente l'exif e quindi di consentire al tuo utente di correggerlo se l'auto-correzione era sbagliata. Il loro è un sacco di strumenti per farlo. Se vuoi farlo lato server, guarda il link sopra, e se vuoi farlo dal lato client, potresti usare JS-Load-Image per esempio.