Не могу получить пиксельный цвет от холста

Question

Не могу получить пиксельный цвет от холста

0

У меня возникли проблемы с получением информации о цвете из пикселей на холсте.

var canvas = document.getElementById('frame');
var context = canvas.getContext('2d');
var img = new Image();
var source = $("#image").attr("src");

img.src = source;
$(img).load(function() {
   context.drawImage(img, 0, 0);
});

var imgd = context.getImageData(0, 0, 50, 50);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log(pix[i] +", "+ pix[i+1] +", "+ pix[i+2] +", "+ pix[i+3]);
}

(Таким образом, я получаю src из другого изображения на странице и рисую его на холсте. Что отлично работает, я вижу изображение на холсте.)

Насколько я понимаю, каждый раз, когда цикл for работает, этот код должен записывать красные, зеленые, синие и альфа-значения в консоль для первых 50X50 пикселей.

Вместо этого все, что я получаю, это нули.

и т.д...

Заранее спасибо за помощь!

EmmaGamma 16 нояб. 2013, в 02:49

Источник

Теги:

javascript

jquery

pixel

html5-canvas

1 ответ

Ещё вопросы

epistemex · Accepted Answer · 2013-11-15T22-46-00.000Z

Попробуйте так:

$(img).load(function() {
    context.drawImage(img, 0, 0);

    var imgd = context.getImageData(0, 0, 50, 50);
    var pix = imgd.data;

    for (var i = 0, n = pix.length; i < n; i += 4) {
      console.log(pix[i] +", "+ pix[i+1] +", "+ pix[i+2] +", "+ pix[i+3]);
    }
});

Во время загрузки вашего изображения цикл, вероятно, выполняется с повторением буфера, поэтому буфер будет пустым из-за асинхронности загрузки изображения.

Кроме того, существует возможность ограничений CORS (вам нужно проверить консоль, чтобы увидеть, есть ли какие-либо ошибки безопасности).

Буквально через две секунды после того, как я это понял, я увидел, что вы опубликовали это, ха-ха.