js 请求图片数据遇到的问题

废话少说先上代码：

function getBase64(imgUrl, callback){

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();

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

xhr.responseType = "blob";

xhr.onload = function () {

if (this.status == 200) {

//得到一个blob对象

var blob = this.response;

let oFileReader = new FileReader();

oFileReader.onloadend = function (e) {

// console.log(e.target)

callback(e.target.result);

};

oFileReader.readAsDataURL(blob);

}

}

xhr.send();

}

请求图片返回的是blob对象，但是我们转码之后却在浏览器中展示不出来，这时候 你需要去掉请求返回类型 responseType，然后打印一下你请求回来的数据，这时候你会发现 返回的编码中缺少了前缀 "data:image/png;base64," ，然后你在看你的页面，此时图片完美的展示出来了。