Das vom Handy auf Angular hochgeladene Bild ist seitwärts oder auf dem Kopf stehend

Question

Ich kann Bilder von meinem Desktop auf eine Angular-basierte Webapplikation hochladen, die auf SharePoint überlagert ist, aber wenn ich von einem Mobiltelefon, z. Mit der Funktion "Take Photo or Video" oder "Photo Library" wird das Bild bei der Aufnahme im Querformat oder bei der Aufnahme im Querformat umgekehrt. Hier ist meine aktuelle Upload-Funktion. Irgendwelche Hinweise/hatten andere die gleichen Probleme beim Hochladen von mobilen Web-Anwendungen von iPhones/Handys in eine SharePoint-Bibliothek?

Hier ist meine Upload-Funktion:

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

Der Ausgang von diesen ist nur in eine Anordnung zur Verwendung in einem Winkel UI Karussell geschoben:

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

Das Bild Karussell auf Seite ist wie folgt :

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

WICHTIG: Das Bild s sind beim Upload in die SharePoint-Bibliothek seitwärts und auf dem Kopf stehend. Daher scheinen sie unabhängig von der Ausgabe fehlorientiert zu sein, wenn sie auf die Zielbibliothek treffen, die ich als Quelle für die Anzeige auf der Seite verwende.

Wie lade ich die Bilder hoch, so dass SharePoint die EXIF-Daten/Ausrichtung berücksichtigt?

Answer 1

Es kann sich auf EXIF ​​beziehen. Siehe JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Wenn Sie eine bessere Antwort wünschen, benötigen wir den Code, der das Bild und die Code-Server-Seite zeigt.

UPDATE: Ich bin überhaupt kein Experte für SharePoint, aber Sie können eine Menge darüber im SharePoint Stack Exchange finden. Zum Beispiel, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library, sollte den Trick tun.

Um es zusammenzufassen: In Ihrem Fall könnte es eine Menge Fälle zu studieren sein. Also empfahl ich Ihnen, das Exif automatisch zu korrigieren und dann Ihrem Benutzer zu erlauben, es zu korrigieren, wenn die automatische Korrektur falsch war. Sie haben eine Menge Werkzeuge, um das zu tun. Wenn Sie es serverseitig machen wollen, schauen Sie sich den obigen Link an, und wenn Sie es auf der Client-Seite machen wollen, könnten Sie zum Beispiel JS-Load-Image verwenden.