Hoe plaats je een afbeeldingsbestand in een json-object?

Ik kan het op twee manieren bedenken:

1.

Het bestand opslaan in het bestandssysteem in een willekeurige map (zeg dir1 ) en hernoemen zodat de naam uniek is voor elk bestand (kan een tijdstempel zijn) (zeg xyz123.jpg ), en vervolgens deze naam op te slaan in een database. Vervolgens trek je tijdens het genereren van de JSON deze bestandsnaam op en genereer je een volledige URL (die http://example.com/dir1/xyz123.png zal zijn )en plaats het in de JSON.

2.

Base 64-codering, het is in feite een manier om willekeurige binaire gegevens in ASCII-tekst te coderen. Het duurt 4 tekens per 3 bytes aan gegevens, plus mogelijk een beetje opvulling aan het einde. In wezen is elke 6 bits van de invoer gecodeerd in een alfabet van 64 tekens. Het "standaard" alfabet gebruikt A-Z, a-z, 0-9 en + en /, met =als opvulteken. Er zijn URL-veilige varianten. Met deze aanpak kunt u uw afbeelding dus rechtstreeks in de MongoDB plaatsen, terwijl u deze opslaat. Codeer de afbeelding en decodeer terwijl u deze ophaalt. Het heeft enkele van zijn eigen nadelen:

• base64-codering maakt bestandsgroottes ongeveer 33% groter dan hun oorspronkelijke binaire representaties, wat betekent dat er meer gegevens nodig zijn (dit kan buitengewoon pijnlijk zijn op mobiele netwerken)
• gegevens-URI's worden niet ondersteund op IE6 of IE7.
• base64-gecodeerde gegevens kunnen mogelijk langer duren om te verwerken dan binaire gegevens.

Bron

Afbeelding converteren naar DATA URI

A.) Canvas

Laad de afbeelding in een Image-Object, schilder het naar een canvas en converteer het canvas terug naar een 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;
}

Gebruik

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

Ondersteunde invoerformaten image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) Bestandslezer

Laad de afbeelding als blob via XMLHttpRequest en gebruik de FileReader API om deze naar een gegevens-URL te converteren.

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

Deze aanpak

• ontbreekt in browserondersteuning
• heeft betere compressie
• werkt ook voor andere bestandstypen.

Gebruik

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

Bron