如何在javascript中渲染二进制图像

Question

我的flask python应用程序返回一个图像作为来自POST请求的响应：

def upload_file():
    if request.method == 'POST':
        return send_file('1.png', mimetype='image/png')

然后我想用javascript和jquery ajax来做请求，响应是：

success: function(img_response) {
            console.log(img_response);
}

PNG IHDR？1 IDATxnIvvdUЃۀ m6f`？W31％6YERxhPb] RDfeFFqo_ O4：J $。％E％Eɲ$）...

如何在浏览器中呈现此类文件？ 也许更好地解码烧瓶中base64中的图像，但我该怎么做呢？

Answer 1

您应该看一下here，使用python将二进制文件编码为base64。一旦你得到它，将字符串发送到你的应用程序（前端）作为响应，然后你可以添加如下内容：

<img id="myImgTag" src="data:image/png;base64, YOUR_BASE64_STRING_FROM_RESPONSE"></img>

您可以使用javascript添加它，例如：

let img = document.getElementById('myImgTag').setAttribute('src','data:image/png;base64, YOUR_BASE64_STRING_FROM_RESPONSE')

==== EDIT ===

要读取文件并将其编码为base64，请执行以下操作：

import base64
...
myImage = open('your_file_name','rb')
myBase64File = base64.b64encode(myImage.read())

然后使用Flask根据需要发送'myBase64File'var（可能在JSON中，如纯文本等）