我正在尝试构建一项服务，客户端可以将图像发送到服务器并在网站上查看。现在，我已经成功通过套接字从客户端发送图像。以下是我的客户端和服务器的片段
client.js
var fs = require('fs');
var express = require('express');
var io = require('socket.io-client');
var ss = require('socket.io-stream');
var client = io.connect(${myIP});
var stream = ss.createStream();
var filename = './image/tmp.jpg';
client.on('connect', function(){
console.log('Connect to server');
setInterval(function(){emitpic()}, 30);});
function emitpic(){
fs.readFile(filename, function(err, buf){
client.emit('profile-image', stream,{image: true, buffer: buf.toString('base64')});
console.log('image file is initialized');
});
}server.js
var express = require('express');
var io = require('socket.io');
var fs = require('fs');
var app = express();
app.use(express.static("."));
app.use(bodyparser.urlencoded({extended:true}));
var port = 1234;
var server = app.listen(port, function(){
console.log('server up:'+ port);
});
var sio = io(server);
sio.on('connection', function(socket){
console.log("got one client");
socket.on('profile-image', function(stream, data){
if(data.image){
var url = 'data:image/jpeg;base64,' + data.buffer;
socket.emit.broadcast('liveCamm', 'data:image/jpeg;base64,' + data.buffer ,function(err, msg){
console.log(err);
console.log(msg);
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>嗯，客户端和服务器之间的一切看起来都很棒，但问题是我想在 Canvas 上绘制图像。以下是我的 html
<html>
<head>
</head>
<body>
<h1>streaming</h1>
<canvas name = "myCanvas" id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas><br>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('liveCam', function(url) {
console.log('connected');
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = url;
ctx.drawImage(img, 10, 10);
});
</script>
</body>
</html>我认为 html 中的这部分不起作用:
socket.on('liveCam', function(url) {
console.log('connected');
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = url;
ctx.drawImage(img, 10, 10);
});有人知道问题出在哪里吗？ 感谢您的耐心。
最佳答案
使用onload事件<img>元素，参见 CanvasContext2D drawImage() issue [onload and CORS]
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
}
img.src = url;
关于javascript - 使用 javascript 绘制从客户端套接字发送的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37937121/