Манипулирование данными изображения <canvas>в расширении Firefox

Question

В моем расширении я хотел бы манипулировать некоторыми изображениями.Поэтому я пытаюсь прочитать их необработанные пиксели, используя холст.Проблема заключается в том, что если в коде Chrome я выполняю (img - изображение в документе содержимого):

var src = document.createElement("canvas");
src.width = img.naturalWidth;
src.height = img.naturalHeight;
var srcCtx = src.getContext("2d");

в последней строке это говорит о том, что getContext не является функцией.С другой стороны, если я запускаю (обратите внимание, что первая строка отличается!):

var src = img.ownerDocument.createElement("canvas");
src.width = img.naturalWidth;
src.height = img.naturalHeight;
var srcCtx = src.getContext("2d");
srcCtx.drawImage(img, 0, 0);
var src_data = srcCtx.getImageData(0, 0, src.width, src.height);

ошибка не возвращается, но src_data выходит пустым.Я полагаю, это может быть связано с доступом к веб-контенту из кода Chrome.Любое предложение?

Answer 1

Я подозреваю, что проблема с первым фрагментом заключается в том, что document является документом XUL, поэтому его функция createElement создаст элемент XUL, а XUL: canvas не существует. Можно создать элементы HTML в документе XUL, но тогда вы захотите использовать createElementNS () . Чтобы быть более понятным, код будет выглядеть как

document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

Почему src_data выходит пустым, хотя я не знаю.

Answer 2

Как я уже говорил выше, проблема была в другом фрагменте кода.

Это было на самом деле из-за того, что я неправильно прочитал документацию и подумал, что src_data должен содержать пиксели, тогда как это должно было быть src_data.data.По какой-то причине я не могу понять, что распечатка uneval(src_data) вернет ({}), тогда как в ней должно быть три члена: data, width и height.

Answer 3

Я думаю, вы должны использовать

content.document.createElement()