如何访问 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 and getImageData():

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

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

如果你想使用p5.js，调用loadPixels() first, then access the pixels[]数组，格式与上面相同。

您还可以在 p5.js 中使用 get(x,y)，它允许以 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，您需要从 pixel/raster 数据中提取 paths/vector 数据。此功能从 p5.js 转移到图像 processing/computer 视觉中，因此未内置到库中，但是您可以使用像 OpenCV.js and it's findContours() functionality.

这样的专门库

实际上我创建了一个库来简化 OpenCV.js 和 p5.js 之间的接口，您可以看到一个基本的 contour example here. To access the contours as an array of 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 which is a nice and simple way to make use of modern machine learning algorithms from p5.js including sketch-rnn. As you can see on the documentation page, there is even a ready to remix p5.js editor sketch

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

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

How can I access the real-time sketch images on a p5.js canvas?

javascript

user-interface

p5.js

tensorflow