javascript - 未捕获的类型错误 : Failed to execute 'getImageData' on 'CanvasRenderingContext2D' : The provided double value is non-finite

Question

我写了一些代码来从网站上的 Canvas 中获取数据:

var checkPoints = ["+0,+0","+10,+10","+10,+0","+0,+10","-10,-10","-10,+0","+0,-10","+20,+20","+20,+0","+0,+20","-20,-20","-20,+0","+0,-20","+30,+30","+30,+0","+0,+30","-30,-30","-30,+0","+0,-30","+40,+40","+40,+0","+0,+40","-40,-40","-40,+0","+0,-40","+40,+40","+40,+0","+0,+40","-40,-40","-40,+0","+0,-40"];
var changePoints = ["600,0","-100,400","-100,300","600,580","-100,1000","1000,300","0,0","600,0","-100,400","-100,300","600,580","-100,1000","1000,300","0,0","600,0","-100,400","-100,300","600,580","-100,1000","1000,300","0,0","600,0","-100,400","-100,300","600,580","-100,1000","1000,300","0,0","600,0","-100,400","-100,300","600,580","-100,1000","1000,300","0,0"];
var checkRGB = [];
var oldCheckRGB = [];
for (i=0; i<checkPoints.length; i++) {
checkRGB.push("");
oldCheckRGB.push("");
}
var mousePos = myCanvas.relMouseCoords(e);
x = mousePos.x;
y = mousePos.y;
c = myCanvas.getContext("2d");
for (i=0; i<checkPoints.length; i++) {
    checkX = x+checkPoints[i].split(",")[0];
    checkY = y+checkPoints[i].split(",")[1];
    console.log("CheckX: "+checkX+", CheckY: "+checkY);
    checkRGB[i] = c.getImageData(x+checkX, y+checkY, ID("myCanvas").width, ID("myCanvas").height).data;
    if (checkRGB[i][0]-oldCheckRGB[i][0] > minimumColorChange || checkRGB[i][1]-oldCheckRGB[i][1] > minimumColorChange || checkRGB[i][2]-oldCheckRGB[i][2] > minimumColorChange) {
        xm = changePoints[i].split(",")[0];
        ym = changePoints[i].split(",")[1];
        console.log("XM set: "+xm+", YM set: "+ym);
    }
}

(每次鼠标移动都会调用这段代码) 而且我不断收到错误消息: canvasTest.js:17 未捕获类型错误:无法在“CanvasRenderingContext2D”上执行“getImageData”:提供的 double 值是非有限的。

我在堆栈溢出、谷歌等方面进行了一些搜索，但没有发现关于此错误或如何修复它的任何结论。

感谢您的帮助!

Answer 1

您正在尝试从字符串数组中添加一个值而不进行任何转换:

 checkX = x+checkPoints[i].split(",")[0];
 checkY = y+checkPoints[i].split(",")[1];

也许你应该使用:

 checkX = x + parseFloat(checkPoints[i].split(",")[0]);
 checkY = y + parseFloat(checkPoints[i].split(",")[1]);