IE11中未定义的getImageData.data

Question

我正在使用以下功能来获取单击坐标的像素数据：

Utils.GetPixel = function(imgData, index)
{
    var i = index*4, d = imgData.data;
    return [d[i], d[i+1], d[i+2], d[i+3]];
};

Utils.GetPixelXY = function(gObj, x, y)
{
    return Utils.GetPixel(gObj.ImgData, y*gObj.ImgData.width+x);
};

在Chrome / Firefox / Edge中打印出一些测试数据可以正常工作，但在IE11中却不能，我对此很陌生，所以有点困惑。

var p = Utils.GetPixelXY(gObj, (mx - gObj.X), (my - gObj.Y));
console.log(p[0]+" "+p[1]+" "+p[2]+" "+p[3]);

Chrome / Firefox / Edge： 255 0 0 255

IE11： 未定义未定义未定义未定义

更新：

我整理了一个小提琴，很抱歉我花了很长时间才回到这个话题。

https://jsfiddle.net/1wwtxrjp/3/

经过一番摸索后，我发现了一些奇怪的地方，在画布上看似单个像素返回rgba像素数据，如下所示：

Answer 1

经过数小时的混乱，经过阅读和测试，我发现我必须parseInt() to ensure that the x and y values are integers because Internet Explorer 10 and later return mouse coordinates as floats to represent fractional pixels

这是工作示例： https : //jsfiddle.net/1wwtxrjp/4/

我真的很惊讶在stackoverflow上没有人指出这一点，而且花了我这么长时间才找到答案，我想很多人会犯这个错误。