使用 nodeJS 的跨浏览器画布未找到该函数的签名

Question

我正在尝试在页面上构建一个画布，每当用户在其上绘制某些内容时，该画布就会自行更新。但是，看起来好像以下代码（来自 index.html）导致了错误

  socket.on("drawn_complete",function(data){
    ctx.putImageData(data.image,0,0);
    console.log("Everthing worked technically");
});

这是在我的控制台中输出的错误：

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided

我的 data.image 是从以下代码返回的：

ctx.getImageData(0,0,200,100); // ctx is canvas.getContext("2d")

这是我的 html 中的画布：

 <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

这是完整的nodeJS：

    var http = require("http")
var server = http.createServer(handler).listen(1337);
console.log("Server created at 127.0.0.1:1337");
var io = require("socket.io").listen(server);


function handler(req,res)
{
    console.log("Client Connected");
    res.writeHead(200,{"Content-type": "text/plain"});
    res.end("Hello World");
}


io.sockets.on("connection",function(socket){
    socket.on("drawing",function(data){
        var image = data["image"];
        io.sockets.emit("drawn_complete",image);
    });
});

当用户在我的画布内握住并移动鼠标时，就会开始绘图：

代码如下：

  c.onmousedown = function(evt){
moving = true
};
c.onmousemove = function(evt){
    if(moving == true)
    {
        console.log("holding and moving");

        var x = evt.clientX - rect.left;
        var y = evt.clientY - rect.top;
        console.log("X: " + x + " Y: " + y);
        ctx.fillRect(x,y,1,1);
        socket.emit("drawing",{"image": ctx.getImageData(0,0,200,100)});

    }
};
c.onmouseup = function(evt){
    moving = false;
};

更新

这是整个脚本：

<script>

window.onload = function(){
var socket = io.connect("http://localhost:1337");
socket.on("drawn_complete",function(data){
    ctx.putImageData(data.image,0,0);
    console.log("Everthing worked technically");
});


var c = document.getElementById("myCanvas");
var moving = false;
console.log(c);
 var ctx = c.getContext("2d");
 var rect = c.getBoundingClientRect();
c.onmousedown = function(evt){
moving = true
};
c.onmousemove = function(evt){
    if(moving == true)
    {
        console.log("holding and moving");

        var x = evt.clientX - rect.left;
        var y = evt.clientY - rect.top;
        console.log("X: " + x + " Y: " + y);
        ctx.fillRect(x,y,1,1);
        socket.emit("drawing",{"image": ctx.getImageData(0,0,200,100)});

    }
};
c.onmouseup = function(evt){
    moving = false;
};
};



</script>

更新 正如帕拉尼克建议的那样，我已尝试在发出图像之前对其进行序列化：

 var stringfy = JSON.stringify(ctx.getImageData(0,0,200,100));
        socket.emit("drawing",{"image": stringfy});

看起来控制台仍然抛出同样的错误

更新（2） 正如@Palanik 建议的那样，我尝试序列化该对象。我知道下面的代码并不完全是他推荐的，但我只想强调一些非常奇特的东西：

发件人：

var stringfy = ctx.getImageData(0,0,200,100);
        console.log(stringfy)
        var sent = JSON.stringify(stringfy);
        socket.emit("drawing",{"image": sent});

接收者

socket.on("drawn_complete",function(data){
imageData = JSON.parse(data.image);
console.log(imageData);
ctx.putImageData(imageData,0,0);
console.log("Everthing worked technically");

});

这里有趣的是 imageData 的 console.log 打印出一个与 ImageData 具有相同属性的对象。高度、宽度和原始数据。看这里：

{"height":100,"width":200,"data":{"0":0,"1":0,"2":0,"3":0,"4":0,"5 etc... }

所以我可以从这里看到我能够取回对象。如果我在 java 中，一个演员就足够了；

ImageData object = (ImageData) imageData // Is there a way to do this?

Answer 1

这里的解决方案是使用canvas.toDataURL();。

这将返回一个 Base64 编码的图像字符串（头部带有 MIME-Type 和编码）。

var canvas = getMyCanvas(),
    ctx = canvas.getContext("2d"),
    encodedImageData = canvas.toDataURL(),
    image = new Image();

image.src = encodedImageData;
ctx.drawImage(image, x, y, w, h...);

您可以愉快地将这些编码字符串传入和传出服务器。
您也可以在常规 HTML <img src="data:image/png;base64,..."> 中使用它们。

另外，您可以传递toDataURL 几个参数：

 canvas.toDataURL("image/jpeg", 0.5);`

其中，第一个参数是请求的文件类型，第二个参数是请求的图像质量级别（0 到 1 之间）。

但不能保证任何浏览器都会支持您所要求的内容，并且无论如何您可能只会返回一个 .png 文件（这可能是您想要的游戏、透明胶片，无论如何)。

另外，Android 2.2 及更低版本的浏览器，以及 IE9，我认为 Mobile Safari 5.1（原始 iPad），不支持.toDataURL。
我对 iPad 的看法可能有误，但它们不支持其他可以结合使用的 HTML5 API。

Answer 2

ImageData 可能不可移植。在发送和反序列化并在接收端创建图像数据之前尝试序列化图像数据。

=== 更新 ===

类似：

发件人

canvasData = ctx.getImageData(0,0,200,100)}
myData = {
        height : canvasData.height,
        width : canvasData.width,
        raw : canvasData.data
};
socket.emit("drawing",{"image": myData});

接收器

imgData = ctx.getImageData(myData.width, myData.height);
for (var i = 0; i < myData.raw.length) {
        imgData.data[i] = myData.raw[i];
}
ctx.putImageData(imgData, 0, 0);

这是未经测试的代码。只是一个想法供您尝试。