使用 js 通过 URL.createObjectURL(image) 将图像从 sql 表加载到 html img

Question

我将 sql 表列中的图像保存为 blob。 我想使用document.querySelector()和URL.createObjectURL(image)将 blob 图像加载到 js 中的 html img 标签。 如果使用php，我们需要声明src=<?php echo $encode_img; ?> src=<?php echo $encode_img; ?>在 img 标签中。 但是，我不想这样声明。 我在 js 中的代码无法成功加载图像。

参考： using-php-to-display-blob和using-javascript-to-display-a-blob

使用php-worked从html中的sql加载blob图像

<?php
    // img saved as blob from sql
    $image          =$array_image[0]['file'];
    $encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <img id="i" src=<?php echo $encode_img; ?> alt="Test">
</body>
</html>

使用js（URL.createObjectUrl）从html中的sql加载blob图像 - 不起作用

<?php
    // img saved as blob from sql
    $image          =$array_image[0]['file'];

?>
<!DOCTYPE html>
<html>
<head>
    <script src="../../library/jquery/jquery-3.4.1.min.js"></script>
    <script>
        $( document ).ready(function() 
        {
            image=<?php echo $image; ?>;
            html_i=document.querySelector("#i");
            var objectURL = URL.createObjectURL(image);
            html_i.src = objectURL;
        });
    </script>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <img id="i"  alt="Test">
</body>
</html>

使用js（没有URL.createObjectUrl）从html中的sql加载blob图像 - 工作

<?php
    // img saved as blob from sql
    $image          =$array_image[0]['file'];
    $encode_img     ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
    <script src="../../library/jquery/jquery-3.4.1.min.js"></script>
    <script>
        $( document ).ready(function() 
        {
            html_i      =document.querySelector("#i");
            html_i.src  =<?php echo $encode_img; ?>;
        });
    </script>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <img id="i"  alt="Test">
</body>
</html>

提前致谢。

Answer 1

我从 php 中的 sql 检索 blob 图像。 然后，我使用base64_encode对 blob 进行编码。 这是因为，我可以在 javascript 中获得 blob 的可读格式（没有任何符号的内容）。 我在 javascript 中访问编码的 blob 以通过b64toBlob转换创建 blob 并使用此 blob 创建 bloburl。 然后，我将 bloburl 传递给图像源。

<?php
// img saved as blob from sql
$image          =$array_image[0]['file'];    
$encode_img     ='"data:image/jpeg;base64,'.base64_encode($image).'"';

?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
    <script>
        const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


        $( document ).ready(function() 
        {

            const contentType       ='image/jpeg';
            const b64Data           ='<?php echo base64_encode($image);?>';
            const blob              =b64toBlob(b64Data, contentType);
            const blobUrl           =URL.createObjectURL(blob);
            //console.log(blobUrl);
            html_i                  =document.querySelector("#i");
            html_i.src              =blobUrl;
        })
    </script>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img id="i"  alt="Test">
</body>
</html>

b64toBlob 转换包括atob function 、 .charCodeAt method 、 Uint8Array constructor和Blob constructor 。我从参考链接中获得b64toBlob函数，您可以在那里找到该函数的说明。

参考： create-a-blob-from-a-base64-string-in-javascript

使用 js 通过 URL.createObjectURL(image) 将图像从 sql 表加载到 html img

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-17 02:00:10

使用 js 通过 URL.createObjectURL(image) 将图像从 sql 表加载到 html img

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-17 02:00:10

解决方案1
0 已采纳 2019-12-17 02:00:10