0

I have the following a photo field in a mysql table and I need to display it in an html page. The value of this field is something like: 0xFFD8FFE1127645786966000049492A00080000000C0000010300...

I have tried the following to display it in a datatable:

columns: [
  {data: 'card_id', name: 'card_id'},
  {data: 'card_number', name: 'card_number'},
  {data: 'name_dr', name: 'name_dr'},
  {data: 'fname_dr', name: 'fname_dr'},
  {data: 'position_dr', name: 'position_dr'},
  {data: 'dept_dr', name: 'dept_dr'},
  {data: 'employee_code', name: 'employee_code'},
  {data: 'photo', name: 'photo'},
],
columnDefs: [
{ targets: 7,
  render: function(data) {
    //var img = 'data:image/jpeg;base64,'+base64_encode(data);
    var img = 'data:image/jpeg;base64,'+btoa(data);
    //const blobUrl = URL.createObjectURL(img);

    return '<img src="'+img+'">'
  }
}

But it does not work and I get an invalid image URL in console. Please help me out!

Update:

Since base64_encode() is a php funciton, I use btoa() but I get only an image icon and not the real image.

M Reza Saberi
  • 7,134
  • 9
  • 47
  • 76

1 Answers1

1

You need the FileReader in order to convert the blob to bas64.

See: Convert blob to base64

J.T. Houtenbos
  • 956
  • 7
  • 17