Datei-Objekt Image-Objekt in JavaScript umwandeln

Question

So habe ich eine Website (mit AngularJS), die Benutzer Dateien über Tag laden können

<input type="file" ng-model="image" id="trigger" onchange="angular.element(this).scope().setFile(this)" accept="image/*"> 

Wenn ich den Upload in der Steuerung verarbeiten das Bild als Datei-Objekt gespeichert wird . Das ist meine Methode, die die Datei speichert und legt auch Variablen das Bild, das ich versuche, um eine Vorschau

$scope.setFile = function (element) { 
    $scope.image = element.files[0]; // This is my image as a File 
    var reader = new FileReader(); 

    //This is for previewing the image 
    reader.onload = function (event) { 
     $scope.image_source = event.target.result; 
     $scope.$apply(); 

    } 
    reader.readAsDataURL(element.files[0]); 
} 

Jetzt bin das Bild mit JIC Bibliothek hier zu komprimieren: https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js

Aber diese Bibliothek übernimmt ein Bildobjekt als sein Parameter und gibt es als komprimiertes Bildobjekt zurück. Ich kann anscheinend keine Möglichkeit finden, mein $ scope.image-Dateiobjekt in ein Image-Objekt zu konvertieren. Wie würde ich das machen?

Ich müsste das komprimierte Bildobjekt auch wieder in eine Datei konvertieren, damit ich es in meinen Azure-Speicher hochladen kann.

Answer 1

Sie müssen nur eine Image Instanz erstellen und src auf Ihre data url setzen. dann gibt sie an JIC:

var img = new Image(); 
img.src = $scope.image_source; 
jic.compress(img,...) 

Es verwendet dann nur ein canvas Element um das Bild zu manipulieren, erzeugt url ein neue Daten und erstellt eine neue Image Instanz, seine src, um die Daten URL setzen. Wenn Sie das komprimierte Bild zurückbekommen, nehmen Sie einfach die src und verwenden Sie atob, um die base64-codierten Daten wieder in Binärdateien zu decodieren und eine Blob zu erstellen. Sie können Blob in den meisten Orten verwenden, die Sie File verwenden würden, zum Beispiel wie durch Ajax hochladen.

var newImg = jic.compress(oldImg,...); 
//replace 'image/png' with the proper image mime type 
var base64data = newImg.src.replace("data:image/png;base64,",""); 
var bs = atob(base64data); 
var buffer = new ArrayBuffer(bs.length); 
var ba = new Uint8Array(buffer); 
for (var i = 0; i < bs.length; i++) { 
    ba[i] = bs.charCodeAt(i); 
} 
var blob = new Blob([ba],{type:"image/png"}); 
//now use blob like you would any other File object