Konva getContext('2d').getImageData()在不同分辨率及缩放时返回错误数据

这个问题是因为高DPI显示器的缩放比例导致逻辑像素和物理像素不匹配造成的：Konva内部会根据屏幕DPI自动缩放画布，但你用的mousePos是逻辑像素坐标，直接拿去调用getImageData（它基于物理像素）就会取到错误位置的像素值。

解决步骤很简单：

• 先获取Konva舞台的缩放因子，也就是stage.contentScaleX()和stage.contentScaleY()，这个值就是物理像素与逻辑像素的比例
• 将鼠标坐标乘以缩放因子，转换成物理像素坐标后再调用getImageData

修改后的代码示例：

// 获取舞台的高DPI缩放比例
const scaleX = stage.contentScaleX();
const scaleY = stage.contentScaleY();

// 把逻辑鼠标坐标转成物理像素坐标
const physicalX = mousePos.x * scaleX;
const physicalY = mousePos.y * scaleY;

// 现在能拿到正确的像素数据了
const pixelData = layer.getContext('2d').getImageData(physicalX, physicalY, 1, 1).data;

原理是Konva为了适配高DPI屏幕，会把底层Canvas的实际尺寸放大到物理像素级别，所以必须用转换后的坐标才能精准定位到你要取的像素点。

内容的提问来源于stack exchange，提问作者Van Wilder