对来自数据库的 blob 图像使用 URL.createObjectURL()答案

【问题标题】：Using URL.createObjectURL() for blob images coming from a database对来自数据库的 blob 图像使用 URL.createObjectURL()
【发布时间】：2020-01-11 01:00:52
【问题描述】：

我正在做一些 ajax 调用以从服务器接收一些 blob。我想使用URL.createObjectURL() 方法在浏览器上显示它。根据docs，它必须接受一个对象。

我需要帮助如何在 PHP 中将其作为对象返回并在浏览器上显示结果。 (result.innerHTML = "....";)

$get_blob_pst = oci_parse($conn,"SELECT ITEMIMG_IMAGE BLOB FROM SCT_ITEM_IMAGE WHERE ITEM_ID_NO=:ITEM_ID");

    oci_bind_by_name($get_blob_pst, ":ITEM_ID", $row->ID);

    if( oci_execute($get_blob_pst) ):
    while ( $row2 = oci_fetch_array($get_blob_pst, OCI_RETURN_LOBS) ) {
        $row2['BLOB'] = base64_encode($row2['BLOB']);
        $result[] = $row2;
        }
    endif;
   echo json_encode($result);

Ajax 完成方法：

let blob = URL.createObjectURL(data.BLOB);
 result.innerHTML = "<img src=''/>";

【问题讨论】：

服务器中数据库中的 BLOB 与 JavaScript 中的 Blob 不同。您需要在 JavaScript 中将二进制数据转换为 blob（如果您将 blob 从服务器发送到 JS，您将获得二进制字符串），请检查 developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

标签： javascript php blob oci8

【解决方案1】：

你可以直接返回一个你的javascript可以直接使用的数据URI数组：

$get_blob_pst = oci_parse($conn,"SELECT ITEMIMG_IMAGE BLOB FROM SCT_ITEM_IMAGE WHERE ITEM_ID_NO=:ITEM_ID");

oci_bind_by_name($get_blob_pst, ":ITEM_ID", $row->ID);

if( oci_execute($get_blob_pst) ):
while ($row2 = oci_fetch_array($get_blob_pst, OCI_RETURN_LOBS)) {
    $data = base64_encode($row2['BLOB']);
    // supposed your images are always png, or you need a way to determine
    // the correct mime type string of the image (the "image/png" part)
    $results[] = "data:image/png;base64,{$data}";
}
echo json_encode($results);

for (let dataURI of data) {
  result.innerHTML += `<img src="${dataURI}"/>`;
}

【讨论】：

我相信有比这更好的方法。这就是我实际上正在做的事情。
有更好的方法。在服务器端转换为 base64 会使 HTTP 响应更大，为相同的数据消耗更多流量
并重载 DOM。 Blob 在循环中重复，因此它会增加重载
您的代码暗示您想直接将图像数据传输到客户端进行查看。您所说的问题是您建议的方法的基础。
是的，我想从服务器发送数据并以正确的方式在浏览器上显示

【解决方案2】：

为了防止通过 AJAX 直接传输图像数据，最简单的方法是通过端点提供图像。

图像端点


$get_blob_pst = oci_parse($conn,"SELECT ITEMIMG_IMAGE BLOB FROM SCT_ITEM_IMAGE WHERE ITEM_ID_NO=:ITEM_ID");
oci_bind_by_name($get_blob_pst, ":ITEM_ID", $row->ID);

if( oci_execute($get_blob_pst) ):
while ($row2 = oci_fetch_array($get_blob_pst, OCI_RETURN_LOBS)) {
    header('Content-Type: image/png'); // assume to always be a png
    exit($row2['BLOB']);
}

Javascript

您可以直接使用构造的端点 URL。

result.innerHTML += `<img src="http://some-server/some-endpoint/${id}"/>`;

【讨论】：