Hvordan sætter man en billedfil i et json-objekt?

Jeg kan finde på at gøre det på to måder:

1.

Lagring af filen i filsystemet i en hvilken som helst mappe (sig dir1 ) og omdøbe den, hvilket sikrer, at navnet er unikt for hver fil (kan være et tidsstempel) (f.eks. xyz123.jpg ), og derefter gemme dette navn i en database. Mens du genererer JSON'en trækker du derefter dette filnavn og genererer en komplet URL (som vil være http://example.com/dir1/xyz123.png ) og indsæt det i JSON.

2.

Base 64 Encoding, Det er dybest set en måde at kode vilkårlige binære data på i ASCII-tekst. Det tager 4 tegn pr. 3 bytes data, plus potentielt lidt polstring i slutningen. I det væsentlige er hver 6 bit af input kodet i et 64-tegns alfabet. "Standard" alfabetet bruger A-Z, a-z, 0-9 og + og /, med =som et udfyldningstegn. Der er URL-sikre varianter. Så denne tilgang vil give dig mulighed for at lægge dit billede direkte i MongoDB, mens du gemmer det. Indkode billedet og afkode, mens du henter det, det har nogle af sine egne ulemper:

• base64-kodning gør filstørrelser omkring 33 % større end deres originale binære repræsentationer, hvilket betyder flere data ned ad linjen (dette kan være usædvanligt smertefuldt på mobilnetværk)
• data-URI'er understøttes ikke på IE6 eller IE7.
• base64-kodede data kan muligvis tage længere tid at behandle end binære data.

Kilde

Konvertering af billede til DATA URI

A.) Lærred

Indlæs billedet i et billedobjekt, mal det til et lærred og konverter lærredet tilbage til 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;
}

Brug

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

Understøttede inputformater image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Indlæs billedet som blob via XMLHttpRequest, og brug FileReader API til at konvertere det til 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();
}

Denne tilgang

• mangler browserunderstøttelse
• har bedre komprimering
• fungerer også for andre filtyper.

Brug

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

Kilde