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

【问题标题】：How render binary image in javascript如何在javascript中渲染二进制图像
【发布时间】：2018-08-07 17:13:01
【问题描述】：

我的烧瓶 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�Ѓ�ۀm6f`��?��W3�1��%6Y��ER�xh�Pb��]�R�DfeFF�qo��_ ��O�4�]J$��.�%E�%E�ɲ$)...

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

【问题讨论】：

文件不作为二进制文件发送到浏览器。 HTTP 协议要求这个文件是字符编码的。这发生在幕后。为了在客户端上使用该文件，您可以从服务器创建带有该文件的新 Image() 对象并将其放入 DOM 中。不用担心二进制/编码/解码等
谢谢。那么我该怎么做呢？我使用它没有成功：success: function(img_response) { $('#image').html('<img src="data:image/png;base64,' + img_response + '" />'); },

【解决方案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”变量（可能在 JSON 中，作为纯文本等）

【讨论】：

Flask 只需要文件名...那么在发送文件之前如何编码为 base64？我试过了，但它不起作用：return send_file( base64.b64encode('1.png'), mimetype='image/png')
在我的帖子中添加了更多信息。您需要将 base64 字符串作为字符串发送，而不是作为文件发送