javascript - 如何访问 p5.js Canvas 上的实时草图图像？

Question

最近在尝试修改this page的源码.这个交互式程序的底层技术称为 sketch-rnn，这是一种可以生成草图的深度学习算法。我需要访问 Canvas 上的实时图像，以便我可以使用卷积神经网络 (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 context和 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()首先，然后访问 pixels[]与上述格式相同的数组。

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

如果您的 CNN 采用二维数组，您仍然需要自己创建此二维数组并填充它的像素值(例如使用 pixels[] 或 get())。请务必仔细检查 CNN 输入:

• 它是一个 32 位整数的二维数组(例如，R、G、B、A 或 A、R、G、B 作为单个整数(0xAARRGGBB 或 0xRRGGBBAA)，只是 RGB 等)
• 二维数组的分辨率应该是多少？ (您的 sketch-rnn Canvas 可能大小不同，您可能需要调整它的大小以匹配 CNN 期望的输入)

更新

我刚刚重新阅读了这个问题，发现上面的答案只回答了一半。缺少关于 sketch-rnn 的另一半。(我过去碰巧在 cool sketch-rnn project 上工作过)

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

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

我实际上启动了一个库来简化 OpenCV.js 和 p5.js 之间的接口(interface)，你可以看到一个基本的 contour example here .以 p5.Vector 的数组形式访问轮廓实例你会使用类似 myContourFinder.getPolylines() 的东西得到一切或myContourFinder.getPolyline(0)获得第一个。

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

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

此外，还有另一个名为 ml5 的库这是使用来自 p5.js 的现代机器学习算法的一种很好而简单的方法，包括 sketch-rnn .正如您在文档页面上看到的那样，甚至还有一个准备重新混合的 p5.js editor sketch

遗憾的是，我没有时间将以上所有内容放在一起作为一个很好的现成示例，但我确实希望有足够的信息来说明如何将这些成分放在一起并放入您自己的草图中。