Jak vložíte soubor obrázku do objektu json?

Napadá mě to udělat dvěma způsoby:

1.

Uložení souboru v systému souborů v libovolném adresáři (řekněme dir1 ) a jeho přejmenování, které zajistí, že název bude jedinečný pro každý soubor (může to být časové razítko) (řekněme xyz123.jpg ) a poté uložení tohoto jména do nějaké databáze. Poté při generování JSON vytáhnete tento název souboru a vygenerujete úplnou adresu URL (která bude http://example.com/dir1/xyz123.png )a vložte jej do JSON.

2.

Base 64 Encoding, Je to v podstatě způsob kódování libovolných binárních dat v textu ASCII. Vyžaduje to 4 znaky na 3 bajty dat plus potenciálně trochu odsazení na konci. V podstatě je každých 6 bitů vstupu zakódováno v 64znakové abecedě. "Standardní" abeceda používá A-Z, a-z, 0-9 a + a /, s =jako výplňový znak. Existují varianty bezpečné pro URL. Tento přístup vám tedy umožní umístit váš obrázek přímo do MongoDB, zatímco jej uložíte Kódujte obrázek a dekódujte jej při načítání, má to některé své nevýhody:

• Kódování base64 činí velikosti souborů zhruba o 33 % větší než jejich původní binární reprezentace, což znamená více dat po drátě (to může být výjimečně bolestivé v mobilních sítích)
• URI dat nejsou podporovány v IE6 nebo IE7.
• Zpracování kódovaných dat base64 může trvat déle než zpracování binárních dat.

Zdroj

Převod obrázku na DATA URI

A.) Plátno

Načtěte obrázek do Image-Object, namalujte jej na plátno a převeďte plátno zpět na 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;
}

Využití

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

Podporované vstupní formáty image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Načtěte obrázek jako blob pomocí XMLHttpRequest a pomocí FileReader API jej převeďte na datovou 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();
}

Tento přístup

• chybí podpora prohlížeče
• má lepší kompresi
• funguje i pro jiné typy souborů.

Využití

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

Zdroj