如何通过WebSocket从画布发送/接收原始二进制图像数据

我喜欢从图像中获取二进制数据。因此，我需要将它放在画布上，并使用getImageDate方法检索它。但是，当我比较源PNG图像的大小和提取的画布图像的大小时，它们是不同的

var img = new Image();

img.onload = function() {
    var canvas = document.getElementById("c");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    //get image
    var canvasimg = ctx.getImageData(0, 0, this.width, this.height);
    alert("binlength: " + canvasimg.data.length);
};

img.src = "images/example.PNG";

我在这里上传了一个例子：

这种行为不仅适用于JavaScript，而且也适用于我通过Firefox中的Contextmenu（右键单击画布/将图像另存为）执行此操作的情况。检索到的图像比原始图像要小得多

---

提前多谢

我不能复制这个。。。chrome报告的PNG大小为1.1KB（约1100字节），但您的fiddle报告提取的大小超过12000字节。这是有意义的，因为PNG是压缩的。你看到不同的东西了吗？