我正在将图像绘制到 HTML 画布上并从中获取图像数据以查找特定像素的颜色。该图像是一张地图,其中每个国家的颜色都不同。我想将 .getImageData() 返回的颜色交叉引用到我手工制作的颜色列表中,以查找任何给定像素所在的国家/地区。
我的问题是,我在画布上绘制的图像和绘制的图像颜色略有不同。
这是绘制到画布上的原始图片:
这是我将画布下载为 PNG 时得到的图片:
两者看起来几乎相同,但如果你下载它们并在照片编辑软件中打开它们,你会发现它们不是。例如,上图中的灰色海洋为 73,73,73,255,下图中的灰色海洋为 71,71,71,255。
我仍然可以完成确定像素所在国家/地区的目标,但我需要根据我下载的图片在绘制到画布后创建一个新列表。
这似乎是一个非常奇怪的问题。
如果有人想知道,我的代码如下所示:
HTML:
<img scr="active_map.png" class="active" id="activeImage">
<canvas id="activeCanvas" width="439px" height="245px">Your Browser Doesn't Support HTML5 Canvases... Sorry :( </canvas>
JS:
var activeCanvas = document.getElementById('activeCanvas')
var activeContext = activeCanvas.getContext("2d");
var activeImage = document.getElementById('activeImage')
activeContext.drawImage(activeImage,0,0);
var activePixelData = activeContext.getImageData(0,0,439,245)["data"];
另外,我正在为 Ubuntu 使用 Firefox 31
-谢谢您的帮助