Как да поставите файл с изображение в json обект?

Мисля да го направя по два начина:

1.

Съхранение на файла във файлова система във всяка директория (кажете dir1 ) и го преименувате, което гарантира, че името е уникално за всеки файл (може да е времеви печат) (кажете xyz123.jpg ), и след това съхраняване на това име в някаква база данни. След това, докато генерирате JSON, издърпвате това име на файла и генерирате пълен URL адрес (който ще бъде http://example.com/dir1/xyz123.png ) и го вмъкнете в JSON.

2.

Base 64 Encoding, това е основно начин за кодиране на произволни двоични данни в ASCII текст. Отнема 4 знака на 3 байта данни, плюс потенциално малко допълване в края. По същество всеки 6 бита от входа е кодиран в 64-знакова азбука. "Стандартната" азбука използва A-Z, a-z, 0-9 и + и /, със =като допълнителен знак. Има безопасни за URL варианти. Така че този подход ще ви позволи да поставите вашето изображение директно в MongoDB, докато го съхранявате. Кодирайте изображението и декодирайте, докато го извличате, то има някои от своите недостатъци:

• base64 кодирането прави размерите на файловете приблизително с 33% по-големи от оригиналните им двоични представяния, което означава повече данни по проводника (това може да е изключително болезнено в мобилни мрежи)
• URI на данни не се поддържат в IE6 или IE7.
• обработката на кодираните в base64 данни може да отнеме повече време, отколкото двоичните данни.

Източник

Преобразуване на изображението в DATA URI

A.) Платно

Заредете изображението в Image-Object, рисувайте го на платно и преобразувайте платното обратно в URL адрес на данни.

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

Употреба

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

Поддържани формати за въвеждане image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Заредете изображението като blob чрез XMLHttpRequest и използвайте FileReader API, за да го преобразувате в 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();
}

Този подход

• липса на поддръжка на браузър
• има по-добра компресия
• работи и за други типове файлове.

Употреба

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

Източник