如何将png二进制数据放入img标签并将其显示为图像？ [英] How to put png binary data into an img tag and display it as an image?

问题描述

我使用这个

  $ .ajax（{
类型：GET，
 url：'template / bump1 / purse.png'，
 datatype：image / png，
成功：函数（数据）{
 
 
 var reader = new FileReader（）; 
 
 reader.onload = function（e）{
 var img = document.getElementById（CaptchaImg）; 
 img.src = e.target。结果; 
}; 
 reader.readAsDataURL（data）; 
 
 
 //$('#CaptchaImg').attr('src'，data）; 
} 
}）; 
  

下载一张图片，它以二进制形式出现，看起来像这样

node.js将其返回为

  WriteHeaderMode（'image / png'，res，200）; 
 res.end（data，'binary'）; 
  

但现在，我该如何将它放入图片标签并将其显示为图片。注意：我不要希望返回数据为base64编码，它必须是二进制的。虽然在客户端将二进制转换为base64很好。

当我将它传递给 readAsDataURL 时，它 TypeError 例外。

谢谢 $ b

编辑

  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，但不显示图像...

解决方案

jQuery Ajax不支持二进制响应（好吧，现在它没有），有一个技巧，它使用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（）; 
  

I am using this

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

to download an image, and it comes out in binary, looking like this

node.js is returning it as

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

But now, how do I put that into an image tag and show it as an image. Note: I do not want to have return data as base64 encoding, it has to be binary. Im fine with converting the binary into base64 on client side though.

When I pass it to the readAsDataURL, it says TypeError exception.

Thanks

EDIT

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

this seems to convert it into a base64 encoding, which starts as data:application/octet-stream;base64, but doesn't display an image...

解决方案

jQuery Ajax does not support binary responses(okay now it does), there is a trick that uses overrideMimeType('text/plain; charset=x-user-defined') to return each byte as a character in the response string and then to loop through the response to create a byte array of the data.

However with bare naked XMLHttpRequest this can be done easily with use of the responseType property.

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

这篇关于如何将png二进制数据放入img标签并将其显示为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！