在 javascript 中提取 png 图像像素的值

Question

在 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 行和更大的行，它 returns (0,0,0) 对于任何像素，即使该像素具有非白色。

知道发生了什么事吗？

Answer 1

您将 canvas 的大小调整为 CSS，因此 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 中提取 png 图像像素的值

Extract value of png image pixel in javascript

javascript

jquery

png

canvas

pixel