Javascript 使用JSBYURL.createObjectURL（图像）将图像从sql表加载到HTMLIMG_Javascript_Html_Image_Blob

Javascript 使用JSBYURL.createObjectURL（图像）将图像从sql表加载到HTMLIMG

javascript html image

Javascript 使用JSBYURL.createObjectURL（图像）将图像从sql表加载到HTMLIMG,javascript,html,image,blob,Javascript,Html,Image,Blob,我在sql表列中将图像保存为blob。我想使用document.querySelector（）和URL.createObjectURL（image）将blob图像加载到js中的html img标记中。如果使用php，我们需要在img标记中声明src=。但是，我不想这样宣布。我在js中的代码无法成功加载图像参考：及使用php从html中的sql加载blob图像 <?php // img saved as blob from sql $image =$ar

我在sql表列中将图像保存为blob。我想使用

document.querySelector（）

和

URL.createObjectURL（image）

将blob图像加载到js中的html img标记中。如果使用php，我们需要在img标记中声明

src=

。但是，我不想这样宣布。我在js中的代码无法成功加载图像

参考：及

使用php从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>

<?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>


这是一个标题
这是一段
alt=“Test”>

使用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>

</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>

<?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>


$（文档）.ready（函数（）
{
图像=；
html#i=document.querySelector（“#i”）；
var objectURL=URL.createObjectURL（图像）；
html_i.src=objectURL；
});
这是一个标题
这是一段
$（文档）.ready（函数（）
{
html#i=document.querySelector（“#i”）；
html_i.src=；
});
这是一个标题
这是一段

提前感谢。

我从php中的sql中检索到blob图像。然后，我使用

base64\u 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>
        $( 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>


const b64toBlob=（b64Data，contentType=''，sliceSize=512）=>{
常量ByTechCharacters=atob（B64数据）；
常量字节数组=[]；
for（让offset=0；offset

b64toBlob转换包括

atob函数

，

.charCodeAt方法

，

Uint8Array构造函数

，以及

Blob构造函数

。我从参考中的链接获得了

b64toBlob

函数，您可以在那里找到该函数的解释

参考：