Argument 1 CanvasRenderingContext2D.putImageData does not implement the ImageData interface

Question

Hi everyone, I'm trying to make a html5 cavas application with node.js, but I have a problem. I get imagedata using getImagedata () and send it to the server as a JSON object to the server that will pass this object to all connected clients, but I get "Argument 1 CanvasRenderingContext2D.putImageData does not implement the ImageData interface." error for all other customers. Any help would be appreciated by the following client code that will send the image:

var output = function(mousestartposition , currentmouseposition){
  **lastpositionpic = context.getImageData(0,0,canvas.width ,      canvas.height);**
    var data = {
        mousestartposition : mousestartposition ,
        currentmouseposition:currentmouseposition,
        lastpositionpic : lastpositionpic
    }
    socket.emit('senddraw' , data);
 }

The code of the client who receives the image is as follows:

 socket.on('receivedraw' , function(data)
 {
     mousestartposition = data.mousestartposition;
     var currentmouseposition = data.currentmouseposition;
     lastpositionpic = data.lastpositionpic;
     **context.putImageData(lastpositionpic,0,0);** // i am getting error on this line
     draw(currentmouseposition);
 });

Answer 1

ImageData JSON. , , , .

, , , , . ImageData , .

, :

lastpositionpic = context.getImageData(0,0,canvas.width, canvas.height);

var pic = [];
for(var i = 0; i < lastpositionpic.length; i++) pic.push(lastpositionpic[i]);

var data = {
    width: canvas.width,
    height: canvas.height,
    mousestartposition : mousestartposition ,
    currentmouseposition:currentmouseposition,
    lastpositionpic : pic
}
socket.emit('senddraw' , data);

:

socket.on('receivedraw' , function(data)
{
     mousestartposition = data.mousestartposition;
     var currentmouseposition = data.currentmouseposition;
     lastpositionpic = data.lastpositionpic;

     var idata = context.createImageData(data.width, data.height);
     for(var i = 0; i < idata.data.length; i++) idata.data[i] = lastpositionpic[i];

     context.putImageData(idata,0,0);
     draw(currentmouseposition);
 });

, . , Uint8ClampedArray ImageData , , .

Node.js, , , ( ).

Uint16 x 2 + Int16 x 2 (, , x, mouse y) ImageData, , , .

.