buffer型の画像データをブラウザに画像として表示させたい

node.jsより，fsモジュールを用いて画像ファイルをバッファとして，socket.ioでクライアント側に送りました．
しかし，ブラウザでは表示が出来ません．
ブラウザには?マークが出力され，コンソールを見てみると，ArrayBufferと書いてありました．
変換の操作が必要だと思うのですが，何型に変換をすればいいのか分かりません．
よろしくお願いいたします．

node
1socket.on("t",(data)=>{
2
3let dir = process.env[process.platform == "win32" ? "USERPROFILE" : "HOME"] ;
4let savepath = dir+"/Desktop/save";
5   fs.readdir(savepath, (err, folder) => {
6     for(let i=0 ; i<folder.length ;i++){
7       console.log(folder[i]) ;
8       fs.readdir(savepath+"/"+folder[i], (err, files) => {
9  console.log(files) ;
10  fs.readFile(savepath+"/"+folder[i]+"/"+files,(err,data) => {
11    socket.emit('image', data);
12    console.log('image file is initialized');
13});
14  })
15}
16});
17})
18

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>teacher</title>
6    <script src="http://name.local:3000/socket.io/socket.io.js"></script>
7  </head>
8  <body>
9    <h3><span id = "logs">
10    <script>
11        let socket = io.connect() ;
12        socket.emit("t","connect") ;
13        socket.on("image", function(data) {
14       console.log(data);
15       $("#logs").append("<img src="+data+">") ;
16    }) ;
17    </script>
18  </body>
19</html>
20

行動規範の内容に同意します

回答1件

ベストアンサー

http://jsfiddle.net/Jan_Miksovsky/yy7Zs/
参考に
(ArrayBufferをBlobに変換しcreateObjectURLで画像作成)

index.html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>teacher</title>
6    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
8  </head>
9  <body>
10    <h3><span id="logs"></span>
11    <script>
12      let socket = io.connect();
13      socket.emit("t","connect");
14      socket.on("image", function(data) {
15        let blob = new Blob([data], { type: "image/png" });
16        let urlCreator = window.URL || window.webkitURL;
17        let src = urlCreator.createObjectURL(blob);
18        $("#logs").append("<img src="+src+">") ;
19      });
20    </script>
21  </body>
22</html>

一応サーバー側も

index.js
1const app = require('express')();
2const http = require('http').Server(app);
3const io = require('socket.io')(http);
4const fs = require('fs');
5
6app.get('/', function(req, res){
7  res.sendFile(__dirname + '/index.html');
8});
9
10io.on('connection', function(socket){
11  console.log('a user connected');
12  socket.on('t', (data) => {
13    const savepath = __dirname + '/images';
14    fs.readdir(savepath, (err, folder) => {
15      folder.forEach(file => {
16        fs.readFile(savepath + '/' + file, (err, data) => {
17          socket.emit('image', data);
18          console.log('image file is initialized');
19        });
20      });
21    });
22  });
23});
24
25http.listen(3000, function(){
26  console.log('listening on *:3000');
27});