如何通过WebSockets从/向Canvas发送/接收原始二进制图像数据

Question

我喜欢从图像中获取二进制数据。因此，我需要将它放在画布上并使用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";

我在此处上传了一个示例：http://jsfiddle.net/wLb3q/4/

此行为不仅适用于JavaScript，也适用于我在Firefox中通过Contextmenu执行此操作（右键单击canvas / save image as）。检索到的图像比原始图像要大得多。

提前多多感谢！