load image from sql table to html img using js by URL.createObjectURL(image)
Question
I saved image in sql table column as blob. I want to load the blob image to html img tag in js using document.querySelector() and URL.createObjectURL(image) . If using php, we need to declare src=<?php echo $encode_img; ?> src=<?php echo $encode_img; ?> in img tag. But, I do not want to declare this way. My code in js could not load image successfully.
Reference: using-php-to-display-blob and using-javascript-to-display-a-blob
load blob image from sql in html using php-worked
<?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>
load blob image from sql in html using js(URL.createObjectUrl)- not worked
<?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>
load blob image from sql in html using js(without URL.createObjectUrl)- worked
<?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>
Thanks in advance.
1 answers
solution1
0 ACCPTED 2019-12-17 02:00:10
I retrieved blob image from sql in php. Then , I encode the blob using base64_encode . This is beacause, I can get readable format(content without any symbols) of blob in javascript. I access encoded blob in javascript to create blob by b64toBlob conversion and create bloburl using this blob. Then, I pass bloburl to image source.
<?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 conversion includes atob function , .charCodeAt method , Uint8Array constructor , and Blob constructor .I get b64toBlob function from link in reference and you can find explanation of this function there.
Reference: creating-a-blob-from-a-base64-string-in-javascript
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.