javascript - 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: 未定义未定义未定义未定义

更新:

我整理了一个 fiddle repro，抱歉我花了这么长时间才回过头来。

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

经过一番摸索之后，我发现了一些奇怪的东西， Canvas 上看似单个像素会返回 rgba 像素数据，如下所示:

Answer 1

经过数小时的彻底混淆、阅读和测试后，我发现我必须 parseInt() 以确保 x 和 y 值是整数，因为 Internet Explorer 10 及更高版本将鼠标坐标作为 float 返回以表示小数像素

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

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