angularjs Bild vor dem Upload komprimieren

Question

Ich baue eine Website für mobile Geräte auf, die angular-file-upload.min.js zum Hochladen von Bildern aus einer mobilen Geräte-Bildbibliothek verwendet.

HTML-Code:

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

Code:

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

Der Upload ist sehr langsam in mobilen Geräten. Wie kann ich die Datei komprimieren?

Answer 1

Sie könnten versuchen, das Bild auf einer Zeichenfläche zu speichern, dann zu data64 konvertieren und dann die Datenzeichenfolge hochladen. Ich habe Art von dies in einem POC gemacht, Theres ein Fehler in ios in Bezug auf große Bilder als die, die Sie mit der Kamera, wenn in Leinwand nehmen konnte, aber das Overal funktioniert gut ... etwas wie;

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

Stringifying das Bild in ein Base64-Text-Format ist alles schön und gut, aber es wird eine kleine Menge Zeit in Anspruch nehmen und schon gar nicht, dass es nicht komprimieren. In der Tat wird es wahrscheinlich deutlich größer sein als das Rohbild. Leider gzipiert Ihr Browser auch keine Uploads. Sie können natürlich mit gezippten Downloads umgehen. Sie könnten sicherlich versuchen, einen gzip des Textes selbst zu machen, indem Sie eine reine JS-Lösung verwenden. Auf Github können Sie solche Dinge finden - https://github.com/beatgammit/gzip-js Das wird aber auch etwas dauern und es gibt keine Garantie, dass die komprimierte Textversion des Bildes kleiner ist als das rohe JPEG, das Sie anhängen.

Eine native mobile App könnte sich entscheiden, eine native Code-JPEG- oder PNG-Optimierung vor dem Senden zu verwenden (im Grunde das Bild neu zu erfassen), aber dies in JavaScript zu tun, ist zu diesem Zeitpunkt möglicherweise problematisch. Angesichts Atwoods Gesetz (alles in JavaScript zu schreiben) könnte es sicherlich getan werden, aber zu diesem Zeitpunkt Mitte 2014 ist es nicht.

Answer 3

Als Alternative zu einer programmatischen Lösung - wenn Ihr Bild von der Gerätekamera für den Upload erstellt wird, ändern Sie einfach die Auflösung der Kamera. Die kleinste Auflösung kann 10x kleiner als die größte sein, und dies kann für viele Situationen geeignet sein.

Answer 4

Es gibt mehrere Bibliotheken, die dies für Sie auf der Clientseite tun.

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