Obraz przesyłany z telefonu komórkowego do firmy Angular jest bokiem lub do góry nogami.

Question

Jestem w stanie przesyłać obrazy z mojego komputera stacjonarnego do aplikacji internetowej opartej na Angular nakładanej na SharePoint bez problemu, ale jeśli przesyłam z telefonu komórkowego, takiego jak iPhone, użycie funkcji "Zrób zdjęcie lub wideo" lub "Biblioteka fotografii" powoduje, że zdjęcie będzie wyświetlane na boki podczas portretowania lub do góry nogami, gdy zostanie zrobione w orientacji poziomej. Oto moja aktualna funkcja przesyłania. Jakieś wskazówki/czy inni mieli takie same problemy z przesyłaniem aplikacji mobilnych do Internetu z iPhone'ów/telefonów komórkowych do biblioteki SharePoint?

Tu jest mój funkcja wysyłania:

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

Wyjście z nich jest po prostu wsuwane tablicy do stosowania w kątowym UI Karuzela:

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

Karuzela obraz jest na stronie następująco :

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

WAŻNE: obraz s są po bokach i do góry nogami po przesłaniu do biblioteki SharePoint, więc niezależnie od wysyłania ich, wydają się błędnie zorientowane, kiedy trafią do docelowej biblioteki, której używam jako źródła do wyświetlenia na stronie.

Jak przesłać obrazy, aby SharePoint szanował dane/orientację EXIF?

Answer 1

Może to być związane z EXIF. Zobacz: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Jeśli chcesz uzyskać lepszą odpowiedź, będziemy potrzebować kodu, który pokazuje obraz, oraz strony serwera kodu.

AKTUALIZACJA: Nie jestem ekspertem w ogóle w SharePoint, ale można znaleźć wiele na jego temat w Exchange SharePoint Stack Exchange. Na przykład, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library, powinien zrobić lewy.

Podsumowując: w twoim przypadku może być ich dużo do zbadania. Zaleciłem więc automatyczne skorygowanie exifa, a następnie zezwolenie użytkownikowi na poprawienie go, jeśli autokorekta była błędna. Ich jest wiele narzędzi do tego. Jeśli chcesz to zrobić po stronie serwera, spójrz na powyższy link, a jeśli chcesz to zrobić po stronie klienta, możesz na przykład użyć numeru JS-Load-Image.