displaying a blob image in html page using javascript

Question

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.

J.T. Houtenbos · Accepted Answer · 2019-11-05 08:32:38Z

1

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

See: Convert blob to base64

answered Nov 5, 2019 at 8:32

J.T. Houtenbos

9567 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

displaying a blob image in html page using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related