时间戳

首页 > 解决方案 > 使用 javascript 在 html 页面中显示 blob 图像

javascript - 使用 javascript 在 html 页面中显示 blob 图像

问题描述

我在 mysql 表中有以下照片字段，我需要在 html 页面中显示它。该字段的值类似于：0xFFD8FFE1127645786966000049492A00080000000C0000010300...

我尝试了以下方法将其显示在数据表中：

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+'">'
  }
}

但它不起作用，我在控制台中得到一个无效的图像 URL。请帮帮我！

更新：

由于 base64_encode() 是一个 php 函数，我使用 btoa() 但我只得到一个图像图标而不是真实图像。

标签： javascript

解决方案

您需要 FileReader 才能将 blob 转换为 bas64。

请参阅：将 blob 转换为 base64

推荐阅读