Экстракт значения PNG пикселя изображения в JavaScript

В JavaScript Я пытаюсь извлечь (R, G, В) значении щелкнутого пикселя из следующего изображения: http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_Snow_Cover/default/2015-05-25/GoogleMapsCompatible_Level8/8/97/49.png Экстракт значения PNG пикселя изображения в JavaScript

Я использую элемент и я установил атрибут crossOrigin = "анонимный", чтобы я мог работать с данными.

Вот мой 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/

Проблема заключается в том, что этот код получает правильное значение RGB от выбранного пикселя только до около 149 строки изображения. для строк 149 и выше он возвращает (0,0,0) для любого пикселя, даже если пиксель имеет не белый цвет.

Любая идея, что происходит?

источник

2015-07-31 jirikadlec2

Вы изменили размер холста с помощью CSS, поэтому холст никогда не превышал 150 пикселей (размер холста по умолчанию составляет 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); 
}

источник

2015-07-31 03:11:42 ericjbasti

Экстракт значения PNG пикселя изображения в JavaScript

ответ

Смежные вопросы