使用HTML5和JavaScript在SQLite中插入和檢索BLOB圖像

Question

我有這段簡短的javascript代碼，可以在其中將記錄輸入到sqlite數據庫：

  function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..

  {

  var namamenutemp = $('input:text[id=namamenu]').val();

  var satuantemp = $('input:text[id=satuan]').val();

  var hargatemp = $('input:text[id=harga]').val();

  var stoktemp = '0';
  db.transaction(function (tx) { tx.executeSql(insertKasir, [namamenutemp, satuantemp, hargatemp], loadAndReset, onError); });  
  }
$("#submitButton").click(insertRecord);

我的HTML輸入到sqlite：

<input type="hidden" id="id">
<input id="namamenu" type="text" placeholder="Nama menu" required="" autofocus="" pattern=" ">
<input id="satuan" type="text" placeholder="Contoh: PCS" required="" pattern=" ">
<input id="harga" type="text" placeholder="Rp." required="" pattern=" ">
<button id="submitButton" type="submit" >Save</button>

這是我的表結構：

"CREATE TABLE IF NOT EXISTS Kasir (id INTEGER PRIMARY KEY AUTOINCREMENT, namamenu TEXT, satuan TEXT, harga TEXT)"

現在我想在表中插入一些圖像，並且我發現它將使用BLOB，但是我不知道如何在HTML5-Javascript上使用它。

我也必須更改表結構嗎？

Answer 1

這是一個類似的問題：如何將圖像的內容獲取為base64。 看起來該方法特定於firefox，但也可以在其他瀏覽器中使用： 用JavaScript獲取圖像數據？

如果圖像在同一域中，則可以使用ajax獲取其內容。 由於您已經在使用jQuery，因此它將如下所示：

$.get(imageUrl, function(result) {
  console.log('binary image content', result);
});

如果要顯示圖像，則需要將其內容轉換為base64，如此處所述： 嵌入Base64圖像