ajax二进制图片显示,ajax二进制流乱码图片解决方法

这篇博客介绍了如何使用Ajax通过GET请求获取二进制图像数据,并将其转化为Blob对象,然后利用window.URL.createObjectURL()方法加载到img标签中。同时,博主提醒在图像加载完成后,使用window.URL.revokeObjectURL()来释放内存。最后,将img标签插入到指定的div容器中。这是一个处理大图像文件并避免性能问题的有效方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

仅供自己参考

在请求成功的地方 添加以下代码:

var blob=new Blob();

blob=this.response;

既然二进制数据拿到了,那么要把它放在一个 html标签中,并且应该是img标签 那么:代码应该是

var img = document.createElement("img");

img.src = window.URL.createObjectURL(blob); //有问题,将blob加载到img中 由于blob太大 会有性能影响 应该怎么在加载之后 如何释放呢:

img.onload = function(e) {

window.URL.revokeObjectURL(img.src);//释放。

};

然后 将img 放到一个div容器中就可以啦。

$("#imgcontainer").html(img); 是的请求处理就应该是这样。

var xhr = new XMLHttpRequest();

xhr.open("get", url, true);

xhr.responseType = "blob";

xhr.onload = function() {

if (this.status == 200) {

var blob = this.response;

var img = document.createElement("img");

img.onload = function(e) {

window.URL.revokeObjectURL(img.src);

};

img.src = window.URL.createObjectURL(blob);

$("#imgcontainer").html(img);

} } xhr.send();

标签:img,二进制,URL,window,乱码,xhr,ajax,blob,var

来源: https://www.cnblogs.com/shiazhen/p/11883686.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值