在 javascript 中，我尝试从以下图像中提取单击像素的(R、G、B)值: http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_Snow_Cover/default/2015-05-25/GoogleMapsCompatible_Level8/8/97/49.png
我正在使用该元素，并设置了 crossOrigin="anonymous"属性，以便我可以处理数据。
这是我的 html 和 javascript 代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img src="http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_Snow_Cover/default/2015-05-25/GoogleMapsCompatible_Level8/8/97/49.png"
crossOrigin="anonymous" width="256" height="256">
<pre id="output"></pre>
<script>
$(function() {
$('img').click(function(e) {
if(!this.canvas) {
this.canvas = $('<canvas/>').css({width:256 + 'px', height: 256 + 'px'})[0];
this.canvas.getContext('2d').drawImage(this, 0, 0, 256, 256);
}
var offX = (e.offsetX || e.clientX - $(e.target).offset().left);
var offY = (e.offsetY || e.clientY - $(e.target).offset().top);
console.log(offX + ' ' + offY);
var pixelData = this.canvas.getContext('2d').getImageData(offX, offY, 1, 1).data;
$('#output').html('offX:' + offX + ' offY:' + offY +
'<br>R: ' + pixelData[0] +
'<br>G: ' + pixelData[1] +
'<br>B: ' + pixelData[2] +
'<br>A: ' + pixelData[3]);
});
});
</script>
</body>
</html>
我还将我的代码放在 jsfiddle 上: http://jsfiddle.net/32beaobL/
问题在于，此代码仅在图像的第 149 行附近获取单击像素的正确 RGB 值。对于第 149 行及以上行，它会为任何像素返回 (0,0,0)，即使该像素具有非白色。
知道发生了什么吗？
最佳答案
您使用 CSS 调整了 Canvas 大小，因此 Canvas 高度永远不会超过 150 像素(默认 Canvas 尺寸为 300 x 150)。
这是您修复的示例:http://jsfiddle.net/32beaobL/1/
这是更改的代码
if(!this.canvas) {
this.canvas = document.createElement('canvas');
this.canvas.width = 256;
this.canvas.height = 256;
this.canvas.getContext('2d').drawImage(this, 0, 0, 256, 256);
}
关于javascript - 在javascript中提取png图像像素的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31737367/