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

0 
<!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.

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

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

Теги:
canvas

1 ответ

0
Лучший ответ

Нет, это не сработает - я был бы удивлен, если бы вы не обнаружили, что 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);
Поделиться
  • 0
    Спасибо за быстрый ответ. Я изменил код, как вы предлагаете, но значения пикселей по-прежнему равны NULL.
  • 0
    Если я не рисую файл png и просто вызываю fillStyle = "rgb (0,0,0)" и fillRect (0,0,300,300), массив значений пикселей может показать 0,0,0,255.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню