Как получить доступ к эскизным изображениям в реальном времени на холсте p5.js? - PullRequest
Новая
       11

Как получить доступ к эскизным изображениям в реальном времени на холсте p5.js?

1 голос
/ 25 сентября 2019

Недавно я пытаюсь изменить исходные коды этой страницы .Основной метод этой интерактивной программы называется sketch-rnn, алгоритм глубокого обучения, который может генерировать наброски.Мне нужно получить доступ к изображениям в реальном времени на холсте, чтобы я мог использовать сверточную нейронную сеть (CNN) и передать изображение в виде двумерного массива в нейронную сеть, чтобы я мог еще больше улучшить программу.Есть ли какая-либо функция p5.js, которая может помочь мне достичь этого?

1 Ответ

2 голосов
/ 25 сентября 2019

Это зависит от того, в каком формате CNN принимает ввод.

Самое простое, что я могу придумать, это использовать простой JavaScript (за пределами p5.js) для доступа к элементу <canvas />.

Например, это то, что вы можете попробовать в консоли браузера на странице sketch_rnn_demo: 

// access the default p5.js Canvas
canvasElement = document.querySelector('#defaultCanvas0')
// export the data as needed, for example encoded as a Base64 string:
canvasElement.toDataURL()

Если вы хотите получить доступ к пикселям, вы можете через контекст Canvas и getImageData () : 

//access <canvas/> context
var context = canvasElement.getContext('2d');
//access pixels:
context.getImageData(0,0,canvasElement.width,canvasElement.height);

Это вернет одномерный массив беззнаковых 8-битных целых (например, значения от 0 до 255) в порядке R, G, B, A (например, pixel0R, pixel0G), pixel0B, pixel0A, pixel1R, pixel1G, pixel1B, pixel1A ... и т. д.)

Если вы хотите использовать вместо этого p5.js, сначала вызовите loadPixels () , а затем получите доступ к пикселей [] массив, который имеет тот же формат, что и выше.

Вы также можете использовать get (x, y) в p5.js, который позволяет 2D-способ доступак пиксельным данным, однако это намного медленнее.

Если вы используете CNN в 2D-массиве, вам все равно нужно создать этот 2D-массив самостоятельно и заполнить егозначения пикселей (например, pixels[] или get()).Обязательно дважды проверьте вход CNN:

  • это двумерный массив 32-битных целых чисел (например, R, G, B, A или A, R, G, B как одно целое (0xAARRGGBB или 0xRRGGBBAA), только RGB и т. Д.)
  • Какое разрешение должно быть для массива 2d?(ваш эскиз-холст может иметь другой размер, и вам может потребоваться изменить его размер, чтобы он соответствовал тому, что CNN ожидает в качестве входных данных)
...