如何访问 p5.js 画布上的实时草图图像？

Question

有个交互式程序的底层技术称为sketch-rnn，一种可以生成草图的深度学习算法。我需要访问画布上的实时图像，以便我可以使用卷积神经网络 (CNN)，并将图像作为二维数组提供给神经网络，以便我可以进一步改进程序。是否有任何 p5.js 函数可以帮助我实现这一目标？

Answer 1

这取决于 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);

这将按 R、G、B、A 顺序返回一个无符号 8 位整数（例如 0-255 的值）的一维数组（例如 pixel0R、pixel0G、pixel0B、pixel0A、pixel1R、pixel1G、pixel1B、pixel1A...等.)

如果您想使用 p5.js，请先调用loadPixels()，然后访问与上述格式相同的像素 []数组。

您还可以在 p5.js 中使用get(x,y)，它允许以 2D 方式访问像素数据，但速度要慢得多。

如果 CNN 接受 2D 数组，您仍然需要自己创建这个 2D 数组并填充它的像素值（例如使用pixels[]或get()）。请务必仔细检查 CNN 输入：

它是一个 32 位整数的二维数组（例如 R、G、B、A 或 A、R、G、B 作为单个整数（0xAARRGGBB 或 0xRRGGBBAA），只是 RGB 等）

二维数组应该是什么分辨率？（您的 Sketch-rnn 画布可能大小不同，您可能需要调整其大小以匹配 CNN 期望的输入）

更新

我刚刚重新阅读了这个问题，并意识到上面的答案有一半的答案。缺少关于 Sketch-rnn 的另一半。（我过去碰巧做过一个很酷的 Sketch-rnn 项目）

我个人认为这个问题可以用更好的措辞来表达：CNN 部分令人困惑。我现在的理解是，您有一个画布，可能来自 p5.js，并且您想将那里的信息提供给 Sketch-rnn 以生成新的绘图。仍然不清楚的是这个画布会发生什么：它是您生成并可以控制的东西，是简单地加载一些外部图像，还是其他东西？

如果 Sketch-rnn 的输入是画布，则需要从像素/栅格数据中提取路径/矢量数据。此功能从 p5.js 转移到图像处理/计算机视觉，因此没有内置到库中，但是您可以使用像OpenCV.js and it's findContours() functionality这样的专门库。

我实际上启动了一个库，以简化 OpenCV.js 和 p5.js 之间的接口，您可以在此处查看基本轮廓示例。要将轮廓作为p5.Vector实例数组访问，您可以使用类似myContourFinder.getPolylines()获取所有内容或myContourFinder.getPolyline(0)获取第一个的方法。

还值得一问的是，您是否需要首先将像素转换为路径（对于 Sketch-rnn 笔画）。如果您可以控制如何将事物绘制到画布中（例如，您自己的 p5.js 草图），您可以轻松跟踪绘制的点，并简单地将它们格式化为 Sketch-rnn 笔画格式。

在js中使用sketch-rnn方面，你上面链接的sketch-rnn演示实际上使用了p5.js，你可以在magenta-demos github repo上找到更多示例（basic_predict是一个好的开始）。

此外，还有另一个名为ml5的库，它是利用 p5.js 中的现代机器学习算法（包括Sketch-rnn）的一种不错且简单的方法。正如您在文档页面上看到的，甚至还有一个准备好重新混合的p5.js 编辑器草图

不幸的是，我没有时间将上述所有内容放在一起作为一个很好的即用型示例，但我确实希望有足够的信息来说明如何获取这些成分并将它们组合到您自己的草图中。