接收二进制流（ArrayBuffer） ，并且显示二进制流图片

1.调用接口，返回二进制流数据

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {//
            var responseText = xhr.responseText;
            //返回二进制数据流
            console.log(responseText);
        }
    };
    xhr.open("GET", "/getData", true);
//需要设置responseType

　　xhr.responseType = "arraybuffer";
　　xhr.send(null)

2. 把二进制数据转为base64

 function arrayBufferToBase64(buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

3.显示图片

var response = xhr.response;
           var url= arrayBufferToBase64(response);
           document.getElementById('img').src='data:image/jpeg;base64,'+url;

完整代码

var xhr = new XMLHttpRequest();
    xhr.open("GET", "/getdata", true);
    xhr.responseType = "arraybuffer";
    xhr.send(null);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //二进制数据流
            var response = xhr.response;
            var url= arrayBufferToBase64(response);
            document.getElementById('img').src='data:image/jpeg;base64,'+url;
        }
    };
   function arrayBufferToBase64(buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

View Code

 

转载于:https://www.cnblogs.com/heihei-haha/p/9209648.html