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

时间:2015-08-19 02:15:52

标签: html ajax image binary

我正在使用此

        $.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);
            }
         });

下载图片,它以二进制形式显示,看起来像这样

enter image description here

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,开始,但不显示图像......

4 个答案:

答案 0 :(得分:5)

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(); 

答案 1 :(得分:2)

Musa的答案是一个很好的解决方案,我在角度上实现了类似的功能并且工作得很好,当你定义responseType = 'blob'你的响应不再是一个字符串时,它将是一个blob类型的对象。 我只需要在header对象中添加一个额外的参数(不确定它是否在jQuery中是必要的)。 headers: {'Content-Type': "image/png"}, 我的完整请求对象:

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

无论你使用什么框架/库:

  • 获取图像(a 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)