How to display image from binary data that I am receiving from python?-CodePudding

I am using python to convert a image to binary. I am getting the output. But I cannot revert back the binary code to image display using data:image/jpeg;base64. Can anyone help?

Python code:
----------------
f = open("demo.jpg", 'rb')
file_content = f.read()
f.close()
print(file_content)

Now I am getting the binary data inside the variable "file_content" from the above code and using it in html.

Html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
    function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/  $/, "").split(" ")));
}

var img = new Image();
img.src = "data:image/jpeg;base64," hexToBase64(getBinary());
document.body.appendChild(img);

function getBinary() {
    return 'xxxxBinary dataxxxxxxxxx'
}




</body>

The error is showing as "Unexpected string". It is showing the error in the binary data. I think there is some misuse of single qoutes in the return type. But I cant understand how to wrap the binary data.

CodePudding user response：

Why don't you encode the image to base64 on python side and in the webpage simply set the encoded data on the image src e.g. check following example

import base64

f = open('demo.jpg', 'rb')
img_encoded = base64.b64encode(f.read())
# img_encoded is the encoded image use that in the webpage
# i.e. no need to use hexToBase64()