Jak umieścić plik obrazu w obiekcie json?

Mogę to zrobić na dwa sposoby:

1.

Przechowywanie pliku w systemie plików w dowolnym katalogu (powiedzmy dir1 ) i zmienić jego nazwę, aby zapewnić, że nazwa jest unikalna dla każdego pliku (może być znacznikiem czasu) (powiedzmy xyz123.jpg ), a następnie przechowywanie tej nazwy w jakiejś bazie danych. Następnie podczas generowania JSON wyciągasz tę nazwę pliku i generujesz pełny adres URL (którym będzie https://example.com/dir1/xyz123.png ) i wstaw go do pliku JSON.

2.

Kodowanie Base 64, Jest to w zasadzie sposób kodowania dowolnych danych binarnych w tekście ASCII. Zajmuje 4 znaki na 3 bajty danych, plus potencjalnie trochę dopełnienia na końcu. Zasadniczo każde 6 bitów danych wejściowych jest zakodowanych w 64-znakowym alfabecie. Alfabet „standardowy” używa A-Z, a-z, 0-9 oraz + i /, z =jako znakiem wypełniającym. Istnieją warianty bezpieczne dla adresów URL. Tak więc takie podejście pozwoli Ci umieścić obraz bezpośrednio w MongoDB podczas jego przechowywania. Zakoduj obraz i dekoduj podczas jego pobierania, ma to swoje wady:

• Kodowanie base64 sprawia, że ​​rozmiary plików są o około 33% większe niż ich oryginalne reprezentacje binarne, co oznacza więcej danych w sieci (może to być wyjątkowo bolesne w sieciach komórkowych)
• identyfikatory URI danych nie są obsługiwane w IE6 ani IE7.
• Przetwarzanie danych zakodowanych w base64 może zająć więcej czasu niż danych binarnych.

Źródło

Konwertowanie obrazu na DATA URI

A.) Płótno

Załaduj obraz do obiektu-obrazu, pomaluj go na płótno i przekonwertuj płótno z powrotem na adres URL danych.

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

Użycie

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

Obsługiwane formaty wejściowe image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Załaduj obraz jako obiekt blob za pomocą XMLHttpRequest i użyj interfejsu API FileReader, aby przekonwertować go na adres URL danych.

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

Takie podejście

• brakuje obsługi przeglądarki
• ma lepszą kompresję
• działa również dla innych typów plików.

Użycie

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

Źródło