Angularjs kompresuje obraz przed przesłaniem

Question

Jestem buliding na stronie internetowej dla urządzeń mobilnych, która używa angular-file-upload.min.js do przesyłania zdjęć z biblioteki obrazów urządzenia mobilnego.

kod html:

<div> 
    <div class="rating-camera-icon"> 
     <input type="file" accept="image/*" name="file" ng-file- 
     select="onFileSelect($files)"> 
    </div> 
    <img ng-show="fileName" ng-src="server/{{fileName}}" width="40" 
    style="margin-left:10px"> 
</div> 

Kod:

$scope.onFileSelect = function($files) { 
     for (var i = 0; i < $files.length; i++) { 
      var file = $files[i]; 
      if (!file.type.match(/image.*/)) { 
       // this file is not an image. 
      }; 
      $scope.upload = $upload.upload({ 
       url: BASE_URL + 'upload.php', 
       data: {myObj: $scope.myModelObj}, 
       file: file 
      }).progress(function(evt) { 
        // console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
        // $scope.fileProgress = evt.loaded/evt.total * 100.0; 
       }).success(function(data, status, headers, config) { 
        // file is uploaded successfully 
        $scope.fileName = data; 
       }); 
     } 
    }; 

Wysyłanie jest bardzo powolny w urządzeniach mobilnych. Jak mogę skompresować plik?

Answer 1

Możesz spróbować zapisać obraz na płótnie, a następnie przekonwertować go na data64, a następnie przesłać ciąg danych. Zrobiłem coś takiego w POC, tam błąd w ios w odniesieniu do dużych obrazów, jak ten, który można zabrać z aparatem, gdy na płótnie, ale nadmiar działa ładnie ... coś w stylu;

file = files[0]; 
try { 
    var URL = window.URL || window.webkitURL, 
     imgURL = URL.createObjectURL(file); 
    showPicture.src = imgURL; 
    imgBlobToStore = imgURL; 
    if(AppData.supports_html5_storage()) {  
    var canvas = document.getElementById('storingCanvas') , 
     ctx = canvas.getContext('2d'), 
     img = new Image(), 
     convertedFile; 
    img.src = imgBlobToStore; 
    img.onload = function() {  
     canvas.width = img.width; 
     canvas.height= img.height; 
     ctx.drawImage(img, 0,0,img.width, img.height); 
     convertedFile = canvas.toDataURL("image/jpeg"); //or png 
     //replace with angular storage here 
     localStorage.setItem($('.pic').attr('id'), convertedFile); 
    }; 
    }, 
} 

Answer 2

Ugruntowanie obrazu do formatu tekstowego base-64 jest w porządku i dobrze, ale zajmie trochę czasu i na pewno go nie skompresuje. W rzeczywistości będzie prawdopodobnie zauważalnie większy niż obraz surowy. Niestety twoja przeglądarka również nie będzie gzipować przesłanych plików. Mogą oczywiście obsługiwać spakowane pliki gzip. Możesz oczywiście spróbować zrobić gzip samego tekstu, używając jakiegoś czystego rozwiązania JS. Patrząc na github można znaleźć takie rzeczy - https://github.com/beatgammit/gzip-js Jednak zajmie to również trochę czasu i nie ma gwarancji, że skompresowana wersja tekstowa obrazu jest mniejsza niż surowy JPEG, który załączasz.

Natywna aplikacja mobilna może zdecydować o korzystaniu z optymalizacji natywnego kodu JPEG lub PNG przed wysłaniem (w razie potrzeby może dokonać ponownego porównania obrazu), ale wykonanie tego w JavaScript wydaje się być potencjalnie problematyczne w tym momencie. Biorąc pod uwagę prawo Atwooda (pisania wszystkiego w końcu w JavaScript) z pewnością można to zrobić, ale w tym momencie w połowie 2014 roku tak nie jest.

Answer 3

Alternatywą dla rozwiązania programowego - jeśli obraz jest tworzony przez kamerę urządzenia do przesłania, to po prostu nie zmieniaj rozdzielczości kamery. Najmniejsza rozdzielczość może być 10 razy mniejsza od największej, a to może być odpowiednie w wielu sytuacjach.

Answer 4

Istnieje kilka bibliotek, które robią to za ciebie po stronie klienta.

• https://github.com/oukan/angular-image-compress
• https://github.com/sammychl/ng-image-compress
• http://angularscript.com/client-side-image-compress-directive-with-angular/