javascript - 如何在 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�� ��IDATx����nIv��vdU�Ѓ��6f`����?����W3��1��%6Y��ER��xh��Pb��]��DfeFF��qo��_ ����O��4��]J$��.��%E��%E��ɲ$)...

如何在浏览器中呈现这种类型的文件？也许在 flask 中解码 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')

====编辑===

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

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

然后只需使用 Flask 发送所需的“myBase64File”var(可能在 JSON 中，作为纯文本等)