如何訪問 p5.js canvas 上的實時草圖圖像？

Question

最近我正在嘗試修改這個頁面的源代碼。 這個交互式程序的底層技術稱為sketch-rnn，一種可以生成草圖的深度學習算法。 我需要訪問 canvas 上的實時圖像，以便我可以使用卷積神經網絡 (CNN)，並將圖像作為二維數組輸入神經網絡，以便進一步改進程序。 是否有任何 p5.js function 可以幫助我實現這一目標？

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 順序（例如 pixel0R,pixel0G,pixel0B,pixel0A,pixel1R,pixel1G,pixel1B,pixel1A...等.)

如果您想使用 p5.js，請先調用loadPixels() ，然后訪問與上述格式相同的像素 []數組。

您還可以在 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 期望的輸入）