如何使用puppeteer将画布保存为图像？

Question

我正在尝试加载一个带有画布的页面，然后将其保存为图像。

例如，this page。在Chrome上，我可以用鼠标右键点击页面右上角的圆圈画布，然后点击保存图像。我想通过NodeJS和Puppeteer来做同样的事情。这个是可能的吗？

到目前为止，我正在尝试通过

const express = require('express')
const router = express.Router()
const puppeteer = require('puppeteer')
const { Cluster } = require('puppeteer-cluster')

(async () => {
    
    const cluster = await Cluster.launch({
        concurrency: Cluster.CONCURRENCY_PAGE,
        maxConcurrency: 2,
    })
    
    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    await cluster.task(async({ page, data: url }) => {
        // let starmapId = 'celestial-canvas'

        await page.goto(url)
        const canvas = await page.evaluate(() => document.querySelector('#myCanvas'))
        return canvas  // .toDataURL()
    })
    
    router.get('/export/canvas', function(req, res) {
        
        // Get URL
        var url = 'https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2'
        
        cluster.execute(url).then( canvas => {
            console.log(canvas)
            res.send(canvas)
        })
    })
    
})();

module.exports = router

但canvas返回null。

Answer 1

在您的示例中，画布位于iframe内。因此，您需要首先获取帧，然后才能使用数据URL传输字符串：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch(/* { headless: false, defaultViewport: null } */);

try {
  const [page] = await browser.pages();

  await page.goto('https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2');

  const frame = await (await page.$('#iframeResult')).contentFrame();

  const data = await frame.evaluate(() => {
    return document.querySelector('#myCanvas').toDataURL();
  });
  console.log(data); // data:image/png;base64,iVBORw0K...
} catch(err) { console.error(err); } finally { await browser.close(); }