実現したいこと
- [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.height69 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
0 コメント