如何将png二进制数据放入img标签并显示为图像？答案

【问题标题】：How to put png binary data into an img tag and display it as an image?如何将png二进制数据放入img标签并显示为图像？
【发布时间】：2015-11-12 03:52:05
【问题描述】：

我正在使用这个

        $.ajax({
            type: "GET",
            url: 'template/bump1/purse.png',
            datatype:"image/png",
            success: function (data) {


                var reader = new FileReader();

                reader.onload = function (e) {
                  var img = document.getElementById("CaptchaImg");
                  img.src = e.target.result;
                };
                reader.readAsDataURL(data);


                //$('#CaptchaImg').attr('src', data);
            }
         });

下载图像，它以二进制形式输出，如下所示

node.js 将其返回为

                        WriteHeaderMode('image/png', res, 200);
                        res.end(data, 'binary');

但是现在，我如何将其放入图像标签并将其显示为图像。注意：我不希望返回数据为 base64 编码，它必须是二进制的。不过，我可以在客户端将二进制文件转换为 base64。

当我将它传递给readAsDataURL 时，它会显示TypeError 异常。

谢谢

编辑

                var img = document.getElementById("CaptchaImg");

                  var reader = new FileReader();

                  reader.onload = function(e) {
                      //img.src = e.target.result;
                      $("body").html(e.target.result);
                    };

                  reader.readAsDataURL(new Blob([data]));

这似乎将其转换为base64编码，以data:application/octet-stream;base64,开头但不显示图像...

【问题讨论】：

我没有研究这么多，但我猜因为application/octet-stream 基本上是在说“下载我”，你可以尝试直接做.replace("application/octet-stream", "image/png");。值得一试哈哈
我试过了，但是没用。
好吧，至少我知道我并没有因为建议而疯狂。但与其试图解决这个问题，不如尝试重新思考逻辑？只需将 src 属性设置为图像 URL，您将启动图像的下载，而不是 AJAX，只需这样做
我不想这样做，因为我这里可能没有它，但我也发送了一个FormData() 作为带有图像的附件。即我正在尝试在同一个 ajax 调用中上传和下载图像。
我尝试了您的解决方案，但我使用了 angular $http，并将 responseType 设置为“blob”。然后它与您的解决方案一起使用，但使用reader.readAsDataURL(data.data);。实际数据是响应对象的属性。我不确定这是否只是 jQuery 和 Angular 工作方式的不同。

标签： html ajax image binary

【解决方案1】：

jQuery Ajax 不支持二进制响应(okay now it does)，有一个技巧是使用 overrideMimeType('text/plain; charset=x-user-defined') 将每个字节作为响应字符串中的一个字符返回，并且然后遍历响应以创建数据的字节数组。

但是，对于裸露的 XMLHttpRequest，这可以通过使用 responseType 属性轻松完成。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var img = document.getElementById("CaptchaImg");
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'template/bump1/purse.png');
xhr.responseType = 'blob';
xhr.send();

【讨论】：

【解决方案2】：

Musa 的回答是一个很好的解决方案，我在 Angular 中实现了类似的东西并且效果很好，当您定义 responseType = 'blob' 时，您的响应将不再是字符串，它将是一个 blob 类型的对象。我只需要向 headers 对象添加一个额外的参数（不确定在 jQuery 中是否需要）。 headers: {'Content-Type': "image/png"}, 我的完整请求对象：

var request = {
            url: "_/get_image_/get",
            method:"GET",
            headers: {'Content-Type': "image/png"},
            responseType: 'blob'
        }

【讨论】：

【解决方案3】：

尝试使用new Blob(data, {type : 'image/png'}) 而不是new Blob([data])

这将确保 blob 的媒体类型是 png。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Blob

【讨论】：

我试过了，它创建了这个 png base64，但它仍然不起作用，图像没有显示
@sneaky 这是来自 xhr 请求的响应吗？
jquery 的ajax() 基本上是浏览器的XMLHttpRequest() 的超集。但我猜这是你从这个请求中得到的对你的 nodejs 脚本的响应。然后你就会遇到问题，因为它似乎不是图像的有效数据集，对于 base64 编码的任何东西来说更是如此。

【解决方案4】：

无论您使用什么框架/lib：

获取图像时（File），要求提供 BLOB 类型
使用以下函数创建 Blob 并从中获取 URL
将您的图片src 设置为该网址

代码：

export function fileToImageBase64Url(file: File): string {
  const blob = new Blob([file], { type: 'image/png' });
  return URL.createObjectURL(blob);
}

如果您在某个时候认为该图像不再有用，请不要忘记清理它：URL.revokeObjectURL(yourUrl)

【讨论】：