javascript getImageData не может получить значение пикселя

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Canvas</title> 

    <script> 
     window.onload = function() { 
      var preview = document.getElementById('preview'); 
      var r = document.getElementById('r'); 
      var g = document.getElementById('g'); 
      var b = document.getElementById('b'); 
      var a = document.getElementById('a'); 

      var canvas = document.getElementById('myCanvas'); 

      var building = new Image(); 
      building.src = "img/cinema.png"; 

      building.onload = function(){ 
       var c = canvas.getContext('2d').drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200); 

       var img = c.getImageData(150, 160, 1, 1); 

       var idata = img.data; 

       var red = idata[0]; 
       var green = idata[1]; 
       var blue = idata[2]; 
       var alpha = idata[3]; 

       r.innerHTML = red; 
       g.innerHTML = green; 
       b.innerHTML = blue; 
       a.innerHTML = (alpha > 0) ? alpha : 'Transparent'; 
      } 
     } 
    </script> 

    <style type="text/css" media="screen"> 
     body { margin: 0px; padding: 0px; } 

     ul li { font-weight: bold; } 
     ul li span { font-weight: normal; } 
    </style> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"> 

</canvas> 
<ul> 
    <li><div id="preview"></div></li> 
    <li>Red: <span id="r">NULL</span></li> 
    <li>Green: <span id="g">NULL</span></li> 
    <li>Blue: <span id="b">NULL</span></li> 
    <li>Alpha: <span id="a">NULL</span></li> 
</ul> 
</body> 
</html>

Я просто хочу проверить функцию getImageData.javascript getImageData не может получить значение пикселя

Изображение может быть показано на хроме, но значение iData[] - все NULL.

Png i используется 256 * 200 пикселей. Кто-нибудь может дать мне несколько подсказок, почему сценарий выше не может работать?

источник

2013-11-10 user2975639

Нет, это не сработает - я был бы удивлен, если бы вы не обнаружили, что c имеет другое значение, чем вы думаете.

Вы, кажется, лечения c, как будто это является результатом canvas.getContext('2d') - но если вы посмотрите на ваш код, c держит результат вызова drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);

Итак, что же это значит? Вы правильно схватили контекст (во временную переменную), а затем использовали его для рисования изображения. Результатом этой операции рисования является то, что вы сохранили в c.

сделать следующие изменения:

var c = canvas.getContext('2d'); 
c.drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200); 

var img = c.getImageData(150, 160, 1, 1);

источник

2013-11-10 07:21:56 enhzflep

Спасибо за быстрый ответ. Я изменил код, как вы предлагаете, но значения пикселей по-прежнему остаются NULL. – user2975639

Если я не рисую файл png и просто вызываю fillStyle = "rgb (0,0,0)" и fillRect (0,0,300,300), массив значений пикселей может показывать 0,0,0,255. – user2975639

@ user2975639 - Добро пожаловать. Угу, это правильно. Холст содержит 32-битные пиксельные данные. Каждый пиксель имеет красное, зеленое, синее и альфа-значение. Когда вы используете 'rgb (0,0,0)', вы только поставляете 24 из этих 32 бит. Затем браузер устанавливает значение альфа-значения в 255. Таким образом, он по-прежнему имеет значение цвета - значение, соответствующее черному в вашем примере. Попробуйте нарисовать градиент, используя выбранный вами редактор изображений (например, Gimp или Photoshop). Запустив его с 255,0,0,0 до 0,0,0,255 - вы получите другой результат, чем если бы вы делали 255,0,0,0 до 255,255,255,255 ... – enhzflep

javascript getImageData не может получить значение пикселя

ответ

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