js 如何解析ArrayBuffer

发送一个图片ajax请求比如 
var url www.abc.com/images/1.jpg
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    if (this.status == 200) {
var buffer = xhr.response;// 返回 ArrayBuffer
     }
};
xhr.send(null);
如何把返回的数据解析成二进制流，这样我就可以在前台显示出来
<img src ="data:image/png;base64,+ buffer" />不要告诉我直接用<img src ="www.abc.com/images/1.jpg" /> 我要把这个数据保存起来，减少下一次的请求。