Bagaimana Anda meletakkan file gambar di objek json?

Saya dapat memikirkan untuk melakukannya dengan dua cara:

1.

Menyimpan file dalam sistem file di direktori mana pun (misalnya dir1 ) dan mengganti namanya yang memastikan bahwa nama itu unik untuk setiap file (mungkin berupa stempel waktu) (misalnya xyz123.jpg ), dan kemudian menyimpan nama ini di beberapa Basis Data. Kemudian saat membuat JSON, Anda menarik nama file ini dan membuat URL lengkap (yang akan menjadi http://example.com/dir1/xyz123.png ) dan masukkan ke dalam JSON.

2.

Pengkodean Basis 64, Ini pada dasarnya adalah cara pengkodean data biner arbitrer dalam teks ASCII. Dibutuhkan 4 karakter per 3 byte data, ditambah sedikit bantalan di bagian akhir. Pada dasarnya setiap 6 bit input dikodekan dalam alfabet 64 karakter. Alfabet "standar" menggunakan A-Z, a-z, 0-9 dan + dan /, dengan =sebagai karakter pengisi. Ada varian yang aman untuk URL. Jadi pendekatan ini akan memungkinkan Anda untuk menempatkan gambar Anda secara langsung di MongoDB, saat menyimpannya Encode gambar dan decode saat mengambilnya, ia memiliki beberapa kelemahannya sendiri:

• encoding base64 membuat ukuran file kira-kira 33% lebih besar dari representasi biner aslinya, yang berarti lebih banyak data (ini mungkin sangat menyakitkan di jaringan seluler)
• URI data tidak didukung di IE6 atau IE7.
• data yang disandikan base64 mungkin membutuhkan waktu lebih lama untuk diproses daripada data biner.

Sumber

Mengonversi Gambar ke URI DATA

A.) Kanvas

Muat gambar ke dalam Image-Object, lukis ke kanvas, dan ubah kanvas kembali menjadi URL data.

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

Penggunaan

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

Format masukan yang didukung image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) Pembaca File

Muat gambar sebagai gumpalan melalui XMLHttpRequest dan gunakan FileReader API untuk mengonversinya menjadi URL data.

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

Pendekatan ini

• kurangnya dukungan browser
• memiliki kompresi yang lebih baik
• berfungsi untuk jenis file lain juga.

Penggunaan

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

Sumber