无法在浏览器中将缓冲字节数组解析为图像

Question

我正在尝试从缓冲字节数组创建图像。这是因为我使用 json 将图像从服务器发送到客户端。这是代码：

客户端用 index.html 文件表示。

// index.html

<img id="ItemPreview">

<script>
    var socket = new WebSocket("ws://localhost:8080");
    socket.onopen = function(event){
        setTimeout(function(){
            var message = JSON.stringify({"task" : "initialize", "data" : ""});
            socket.send(message);
        }, 1000);
    };
    socket.onmessage = function(event){
        var json = JSON.parse(event.data);
        if(json.task == "display-image"){
            console.log("From Client\t\t: " + json);
            console.log(json.data.data);
            var urlCreator = window.URL || window.webkitURL;
            //var imageUrl = urlCreator.createObjectURL(json.data);
            var imageUrl = urlCreator.createObjectURL(new Blob(json.data.data));
            document.querySelector("#ItemPreview").src = imageUrl;
            //document.querySelector("#ItemPreview").src = "data:image/png;base64," + json.data.data;
            var message = JSON.stringify({  "task" : "get-image", "data" : ""});
            socket.send(message);
        }
    };

</script>

我也试过评论里面的，但是没能实现...

服务器用 index.js 文件表示。

//index.js

var server = require('ws').Server;
var s = new server({ port : 8080 });
var fs = require('fs');

s.on('connection', function(ws){

    ws.on('message', function(message){
        var json = JSON.parse(message);
        console.log("From Server:\t\t" + json);
        if(json.task == "initialize"){
            var image = fs.readFileSync("./img/1.jpg");
            var messageToSend = JSON.stringify({
                "task" : "display-image",
                "data" : image
            });
            ws.send(messageToSend);
        }
    });

    ws.on('close', function(){
        console.log("I lost a client");
    });

});

这只是一个简单的问题，但我已经在论坛中搜索过，但无法解决我的问题。如果有人能帮助我，我将不胜感激！

Answer 1

这会起作用：

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

socket.onmessage = function (event) {
    var json = JSON.parse(event.data);
    if (json.task == "display-image") {
        var imageUrl = _arrayBufferToBase64(json.data.data);
        document.querySelector("#ItemPreview").src = "data:image/png;base64," + imageUrl;
        var message = JSON.stringify({"task": "get-image", "data": ""});
        socket.send(message);
    }
};

无法在浏览器中将缓冲字节数组解析为图像

Cant parse Buffered Byte Array into Image in Browser

javascript

arrays

byte

blob

image