zoukankan      html  css  js  c++  java
  • 接收二进制流(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
  • 相关阅读:
    Linux基本命令
    LR之流程
    Jmeter&Ant构建自动化测试平台
    正则表达式
    搭建wordpress-安装xshell
    git本地文件提交
    Git基本操作
    python-之基本语法
    SQL语句之-简单查询
    postman之请求&断言
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/9209648.html
Copyright © 2011-2022 走看看