Hur lägger man in en bildfil i ett json-objekt?

Jag kan tänka mig att göra det på två sätt:

1.

Lagra filen i filsystemet i valfri katalog (säg dir1 ) och byter namn på den vilket säkerställer att namnet är unikt för varje fil (kan vara en tidsstämpel) (säg xyz123.jpg ), och sedan lagra detta namn i någon databas. När du sedan genererar JSON drar du det här filnamnet och genererar en fullständig URL (som kommer att vara http://example.com/dir1/xyz123.png )och infoga den i JSON.

2.

Base 64 Encoding, Det är i grunden ett sätt att koda godtycklig binär data i ASCII-text. Det tar 4 tecken per 3 byte data, plus eventuellt lite utfyllnad i slutet. I huvudsak är varje 6 bitar av inmatningen kodad i ett alfabet med 64 tecken. "Standard"-alfabetet använder A-Z, a-z, 0-9 och + och /, med =som utfyllnadstecken. Det finns URL-säkra varianter. Så det här tillvägagångssättet låter dig lägga din bild direkt i MongoDB, medan du lagrar den. Koda bilden och avkoda medan du hämtar den, den har några av sina egna nackdelar:

• base64-kodning gör filstorlekar ungefär 33 % större än deras ursprungliga binära representationer, vilket innebär mer data längs tråden (detta kan vara exceptionellt smärtsamt i mobila nätverk)
• data-URI:er stöds inte på IE6 eller IE7.
• base64-kodad data kan möjligen ta längre tid att bearbeta än binär data.

Källa

Konverterar bild till DATA URI

A.) Canvas

Ladda bilden i ett bildobjekt, måla den till en duk och konvertera tillbaka duken till en dataURL.

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

Användning

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

Indataformat som stöds image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Ladda bilden som blob via XMLHttpRequest och använd FileReader API för att konvertera den till en data-URL.

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

Detta tillvägagångssätt

• saknar webbläsarstöd
• har bättre komprimering
• fungerar även för andra filtyper.

Användning

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

Källa