実現したいこと
- [JPEG画像ファイルをSocket.IOを用いて送信できるようにしたいです ]
前提
Node.jsでSocket.IOを利用してチャットルームのようなものを作成しています。
チャットルームでは画像を送信するとリアルタイムに全ユーザーにその画像が送られて表示できるようにしたいです。
PNG画像で上記機能を満たすことは出来たのですが、JPEG画像を送信しようとすると表示されません。
PNG画像の場合はできて、JPEG画像の場合に出来ないのが理解できず、解決策をネットで調べましたがよくわかりませんでした。
お手数おかけし申し訳ございませんが、どうすればいいのかご教授願えますと幸いです。
発生している問題・エラーメッセージ
JPEG画像を送信すると、何も表示されない。
該当のソースコード
app.js(サーバ側の処理)
javascript
1const express = require('express'); 2const http = require('http'); 3const socketIo = require('socket.io'); 4 5const app = express(); 6const server = http.Server(app); 7const io = socketIo(server); 8 9const PORT = 3000; 10 11app.get('/', (req, res) => { 12 res.sendFile(__dirname + '/index.html'); 13}); 14 15server.listen(PORT, () => { 16 console.log(`listening on port ${PORT}`); 17}); 18 19io.on('connection', (socket) => { 20 console.log('user connected'); 21 socket.on('sendMessage', (message) => { 22 console.log('Message has been sent: ', message); 23 24 io.emit('receiveMessage', message); 25 }); 26}); 27 28io.sockets.on( 'connection', function (socket) { 29 30 socket.on( 'image', function ( imageData ) { 31 console.log('TEST'); 32 33 io.emit('image', imageData); 34 35 }); 36 37 });
index.html(クライアント側の処理)
html
1<html> 2<head> 3 <script src="/socket.io/socket.io.js"></script> 4 5</head> 6 7<body> 8 <h1>simple chat</h1> 9 <input id="inputText" type="text"> 10 <input id="sendButton" type="submit"> 11 <ul id="messageList" /> 12 13 <form action="" name="form"> 14 <input id="file" type="file"> 15 </form> 16 <div id="display"> 17 </div> 18 19 <canvas id="canvas" width="300" height="300"> 20 キャンバスの表示内容を説明する代替テキストです。 21 </canvas> 22 23 <script> 24 alert("test"); 25 26 const socket = io(); 27 28 const clearText = () => { 29 document.getElementById('inputText').value = ''; 30 } 31 32 const addMessageList = (message) => { 33 const ul = document.getElementById('messageList'); 34 const li = document.createElement('li'); 35 const text = document.createTextNode(message); 36 li.appendChild(text); 37 ul.appendChild(li); 38 }; 39 40 document.getElementById('sendButton').addEventListener('click', () => { 41 let inputMessage = document.getElementById('inputText').value; 42 43 if (inputMessage === '') { 44 return; 45 } 46 47 socket.emit('sendMessage', inputMessage); 48 clearText(); 49 }); 50 51 socket.on('receiveMessage', (message) => { 52 addMessageList(message); 53 }); 54 55 socket.on( 'connect', function () { 56 57 // サーバから送られた画像を受け取って表示 58 socket.on( 'image', function( imageData ) { 59 if ( imageData ) { 60 alert("test2"); 61 62 var canvas = document.createElement( 'canvas' ); 63 var ctx = canvas.getContext( '2d' ); 64 var img = new Image(); 65 img.src = imageData; 66 img.onload = function() { 67 canvas.width = img.width; 68 canvas.height = img.height 69 ctx.drawImage( img, 0, 0); 70 document.body.appendChild( canvas ); 71 } 72 } 73 }); 74 75 }); 76 77 // 相手ブラウザに画像を送る 78 function sendImage( event ) { 79 80 const canvas = document.getElementById("canvas"); 81 var ctx = canvas.getContext('2d'); 82 var reader = new FileReader(); 83 var file = event.target.files[0]; 84 85 reader.onload = function( event ) { 86 87 var img = new Image(); 88 89 img.onload = function() { 90 canvas.width = img.naturalWidth; 91 canvas.height = img.naturalHeight; 92 ctx.drawImage(img, 0, 0); 93 } 94 img.src = event.target.result; 95 96 socket.emit( 'image', event.target.result ); 97 98 }; 99 reader.readAsDataURL( file ); 100 } 101 102 var file = document.getElementById( 'file' ); 103 file.addEventListener( 'change', sendImage, false ); 104 105 </script> 106 107 </body> 108</html>
試したこと
toDataURLというメソッドを使うのかな?と思ったのですが、
色々試しましたが上手くいきませんでした。
補足情報(FW/ツールのバージョンなど)
Node.js / v14.18.1
Express / 4.19.2
Socket.IO / 4.7.5
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー