Insert and retrieve BLOB image in SQLite with HTML5 and JavaScript

Question

i have this short javascript code where i can input record to sqlite database:

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

my html to input to 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>

and this is my table structure :

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

and now i want to insert some image to my table, and i've found it will using BLOB, but i don't know how to use it on my HTML5-Javascript.

do i have to change my table structure too?

Answer 1

The is a similar question: how to get the contents of an image as base64. Looks like the method is specific to firefox, but could also work in other browsers: Get image data in JavaScript?

If the image is on the same domain, you could get its content with ajax. Since you're already using jQuery it would look like this:

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

If you want to show the image, you need to turn its content to base64, like described here: Embedding Base64 Images