我怎样才能通过websocket最终发送图纸？

Question

我目前正在制作一个在线小说（一个人做一个绘图，其他人不得不猜测它是什么）。

目前我在抽屉（画布上）中将我的整个图像发送到＆＃34; mouseup＆＃34; DOM事件到服务器，我以相同的格式将它发送回guesser，我的问题是它似乎很重，我不知道如何有一个较轻的有效载荷。

$('#canvas').on('mouseup touchend', function() {
    mouse.down = false;

    // My problem is sending canvas.toDataURL() every time
    update_canvas(canvas.toDataURL());
});

// I use this function inside ActionCable so this.perform will send the data to my channel
var update_canvas = function(data_url) {
    this.perform('update_canvas', {data_url: data_url});
},

您是否有更好的方式来发送我的图像数据？

Answer 1

您可以发送鼠标位置列表或画布的增量更改，即使用第二个画布仅发送新图纸。

Answer 2

我认为最好的方法是发送你正在绘制的坐标，我已经实现了类似的东西，你看看 http://connectboard.herokuapp.com/ 在两个或多个不同的浏览器或计算机中打开并绘制。