Wie fügt man eine Bilddatei in ein JSON-Objekt ein?

Ich kann mir vorstellen, es auf zwei Arten zu tun:

1.

Speichern der Datei im Dateisystem in einem beliebigen Verzeichnis (z. B. dir1 ) und umbenennen, wodurch sichergestellt wird, dass der Name für jede Datei eindeutig ist (kann ein Zeitstempel sein) (z. B. xyz123.jpg ) und dann diesen Namen in irgendeiner Datenbank speichern. Dann ziehen Sie beim Generieren des JSON diesen Dateinamen und generieren eine vollständige URL (die http://example.com/dir1/xyz123.png sein wird ) und in JSON einfügen.

2.

Base 64 Encoding, es ist im Grunde eine Möglichkeit, beliebige Binärdaten in ASCII-Text zu codieren. Es dauert 4 Zeichen pro 3 Byte Daten, plus möglicherweise ein bisschen Auffüllen am Ende. Im Wesentlichen sind alle 6 Bits der Eingabe in einem 64-Zeichen-Alphabet codiert. Das "Standard"-Alphabet verwendet A-Z, a-z, 0-9 und + und /, mit =als Füllzeichen. Es gibt URL-sichere Varianten. Dieser Ansatz ermöglicht es Ihnen also, Ihr Bild direkt in die MongoDB zu stellen, während es gespeichert wird. Das Bild zu codieren und zu decodieren, während es abgerufen wird, es hat einige seiner eigenen Nachteile:

• Die Base64-Codierung macht die Dateigröße um etwa 33 % größer als ihre ursprüngliche binäre Darstellung, was bedeutet, dass mehr Daten übertragen werden (dies kann in Mobilfunknetzen äußerst schmerzhaft sein)
• Daten-URIs werden von IE6 oder IE7 nicht unterstützt.
• Base64-codierte Daten können möglicherweise länger verarbeitet werden als binäre Daten.

Quelle

Bild in DATEN-URI umwandeln

A.) Leinwand

Laden Sie das Bild in ein Image-Objekt, malen Sie es auf eine Leinwand und konvertieren Sie die Leinwand zurück in eine Daten-URL.

function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

Nutzung

convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Unterstützte Eingabeformate image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Laden Sie das Bild als Blob über XMLHttpRequest und verwenden Sie die FileReader-API, um es in eine Daten-URL zu konvertieren.

function convertFileToBase64viaFileReader(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      var reader  = new FileReader();
      reader.onloadend = function () {
          callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
}

Dieser Ansatz

• fehlende Browserunterstützung
• hat eine bessere Komprimierung
• funktioniert auch für andere Dateitypen.

Nutzung

convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Quelle