0

我一直在尝试从我的 observablehq 笔记本创建动画 SVG 的视频。

在 ObservableHQ 笔记本中，我做了

currentTime = 0

timeTrick = {
  if (document.URL.includes('d3-video-recording')){
    performance.now = () => currentTime
  }
}

覆盖性能。现在停止动画。

我正在使用 puppeteer 来增加 currentTime 并截取屏幕截图。

const puppeteer = require('puppeteer')
const d3 = require('d3')

;(async () => {
  // open new tab and wait for data to load
  // const browser = await puppeteer.launch()
  const browser = await puppeteer.launch({ executablePath : "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"})

  const page = await browser.newPage()
  await page.goto('https://observablehq.com/@seankim/home-run-chart-race?d3-video-recording', {waitUntil: 'networkidle2'})

  const iframe = await page.waitForSelector('iframe')
  const frameContent = await iframe.contentFrame();
  const chartEl = await frameContent.waitForSelector('body div .observablehq:nth-of-type(7)')
  await sleep(5000)

  // step through each frame:
  // - increment currentTime on the page
  // - save a screenshot
  for (let frame of d3.range(120)){
    await page.evaluate((frame) => {
        // performance.now = () => frame*1000/0.6;
      currentTime = () => frame*1000/0.6;
        }, frame)
    }
    await sleep(50)
    let path = __dirname + '/png/' + d3.format('05')(frame) + '.png'
    await page.screenshot({path})
  }
  browser.close()
})()


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

但

currentTime = () => frame*1000/0.6;

似乎没有按预期工作，并且

performance.now = () => frame*1000/0.6;

以上也没有。

你能帮我解决这个问题吗？

这是Observablehq 链接。

4

0 回答 0