HTML5 畫布是一個功能豐富的東西，但出于測試目的，需要查看的toDataURL方法是https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL方法，它會給你一個表示畫布內容圖像的字符串。您可以將此字符串傳遞回 Puppeteer/node 上下文并檢查它以查看畫布是否正確（可能通過將其轉換回圖像或數組）。
此外，getImageData方法https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData將直接獲取圖像數組，但您必須轉換 ImageData https://developer.mozilla.org/ en-US/docs/Web/API/ImageData Uint8ClampedArray到一個列表，以便將它從“瀏覽器”傳遞到“節點”上下文（我認為）
// This runs in the browser context
var get_canvas_data_json_object = function() {
// get the 4 by 4 upper left pixel values from the canvas_context
var image_data = canvas_context.getImageData(0,0,4,4);
var data_array = image_data.data;
// 4 8-bit RGBA color values by 4 rows by 4 columns as a serializable list
var data_list = Array.from(data_array);
return data_list;
};
然后像這樣從 puppeteer 調用這個函數
// this runs in the puppeteer/node context
const data = await page.evaluate("get_canvas_data_json_object()")
這是一個類似的工作示例
https://github.com/flatironinstitute/radiation_viz
它在瀏覽器上下文中從 WebGL 畫布獲取數據：
https://github.com/flatironinstitute/radiation_viz/blob/master/docs/main.js#L322
并在 puppeteer/node 上下文中讀取它：
https://github.com/flatironinstitute/radiation_viz/blob/master/image_capturer/scrape_images.js#L66
希望對您有所幫助或幫助您入門。
