xhr2 blob属性兼容性bug

最新推荐文章于 2024-08-14 15:58:05 发布

一名工程师

最新推荐文章于 2024-08-14 15:58:05 发布

阅读量992

点赞数

分类专栏： javascript 文章标签： xmlhttprequest js 图片

本文链接：https://blog.youkuaiyun.com/qushapos/article/details/65627943

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

XHR加载图片

记录一个XMLHttpRequest 2兼容性bug的修复.

bug描述

通过XHR2的responseType blob属性, 完成图片加载的代码. 在部分浏览器及手机上不适配. 原因为部分机型不支持blob属性. 适配的范围见 http://caniuse.com/#search=xhr

解决办法

给出两种解决办法, 第一种若无法解决, 就用第二种. 很不幸我是第二种.
通过arraybuffer属性来实现

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var blob = new Blob([oReq.response], {type: "image/png"});
  // ...
};

oReq.send();

不识别Blob构造方法.

第二种办法

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.overrideMimeType("text/plain; charset=x-user-defined");

oReq.onload = function(oEvent) {
    if (this.status == 200) {
        var blob = new Blob([oReq.response], {type:"image/png"});
        // ...
        var dataScheme = 'data:'+xhr.getResponseHeader('content-type')+';base64,';
        var stream = translateToBinaryString(xhr.responseText);
        dataScheme += window.btoa(stream);
        //到这里dataScheme已经可以直接赋值给img的src属性了, 图片就能出来了.
    }
};

oReq.send();

function translateToBinaryString(text) {
    var out;
    out = '';
    for (i = 0; i < text.length; i++) {
        out += String.fromCharCode(text.charCodeAt(i) & 0xff);
    }
    return out;
}