html 显示 二进制jpeg图像

做了个简单的socket.io服务器，以不断推送图片的方式进行“直播”

那么后端是把图片以jpeg编码成二进制格式，直接emit

前端该如何显示？ 搞了半天还是半懂不懂的，但是凑合搞定了。

 

<body>
    <img id="player" style="width:704px;height:576px"/>
</body>

 

首先，接收到的是个arrayBuffer

 

关键是通过  arrayBuffer -> 转 base64，

参考

https://blog.csdn.net/weixin_30906425/article/details/99002648

 

    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);
    }

 然后<img> .src 就可以显示了

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

 

 

 

posted @ 2020-09-08 22:52  永远的幻想  阅读(2486)  评论(0)  编辑  收藏  举报