PIL和javascript getImageData

Question

我尝试使用Python（PIL）修改像素，然后使用javascript再次读取像素

在python中我做了这个，

from PIL import Image

im  = Image.open("foo.png").convert('RGBA')
pix = im.load()

print im.mode

for x in range(0, 10):
    for y in range(0, 10):
        pix[x, y] = (50, x, y, 100)

im.save("foo_new.png")

在javascript中我读了这样的图片，

<img src="foo_new.png" id="myImage">
<br>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<script>    
    window.onload = function() {
      var img = document.getElementById("myImage");

      var c   = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.drawImage(img, 0, 0);

      console.log(ctx.getImageData(0, 0, 10, 10).data)
    }
</script>

在chrome的控制台中，我希望看到以下序列，

[50, 0, 0, 100]
[50, 0, 1, 100]
[50, 0, 2, 100]
...

然而，我得到了这个

[51, 0, 0, 100], 
[51, 0, 0, 100], 
[51, 3, 0, 100],
[51, 3, 0, 100]

完全出乎意料......

但是RGB模式运行得很好，我真的不懂，有人都知道吗？