angularjs komprimieren Bild vor dem hochladen

Ich bin Gebäude ein web site, die für mobile Geräte verwendet angular-file-upload.min.js für das hochladen von Bildern von einem mobilen Gerät aus Bild-Bibliothek.

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?

  • wenn Sie nicht mit der nativen app, die Sie nicht komprimieren einer Datei auch die meisten der Bilder wie jpg sind bereits komprimiert, soweit ich weiß, gibt es nichts, was Sie tun können.
  • Wenn Sie auf der Suche für die Bildbearbeitung vor dem hochladen das könnte helfen: stackoverflow.com/questions/2434458/...
InformationsquelleAutor ben ezra | 2014-04-23
  1. 3

    Stringifying das Bild in einen base64-text-format ist alles schön und gut, aber es dauert eine kleine Menge von Zeit, und schon gar nicht komprimieren. In der Tat wird es wahrscheinlich deutlich größer als das raw-Bild. Leider ist Ihr browser wird auch nicht gzip ein-uploads. Sie können natürlich behandeln Gzip-downloads. Sie könnten sicherlich versuchen zu tun, ein gzip-der text selbst mit einigen reinen JS Lösung. Suchen Sie auf github finden Sie solche Dinge - https://github.com/beatgammit/gzip-js das wird Jedoch einige Zeit in Anspruch nehmen als gut und es gibt keine Garantie, dass der komprimierte text-version des Bildes ist kleiner als die raw-JPEG Sie legen.

    Native mobile-app können sich entscheiden, einige native-code, JPEG-oder PNG-Optimierung vor dem Versand (grundsätzlich berechnen Sie das Bild neu), wenn angebracht, aber tun dies in JavaScript scheint potenziell problematische an diesem Punkt in der Zeit. Angesichts Atwood Gesetz (des Schreibens alles, was schließlich in JavaScript) ist es sicherlich getan werden könnte, aber an diesem Punkt in der Mitte 2014 ist es nicht.

    InformationsquelleAutor TAP
  2. 0

    Könnten Sie versuchen, speichern Sie das Bild auf eine Leinwand, dann konvertieren zu data64 und dann laden Sie die Daten-string.
    Ich machte diese Art von in ein POC, es gibt einen bug in ios in Bezug auf große Bilder, die Sie könnte nehmen Sie mit der Kamera, wenn Sie im canvas-Bereich, aber die Berechnung funktioniert schön... so 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);
    };
  }, 
}
    InformationsquelleAutor Santiago Rebella
  4. -2

    Als alternative zu einer programmtechnischen Lösung - wenn Ihr Bild wird erstellt, indem die Kamera für den upload, warum dann nicht einfach ändern Sie die Auflösung der Kamera. Die kleinste Auflösung kann 10x kleiner als der größte, und diese können als geeignet für viele Situationen.

    InformationsquelleAutor Roger Layton
Schreibe einen Kommentar