DOM VCR

使用 HTML5 canvas 和 SVG 从 DOM 节点生成视频或 GIF

English | 简体中文

📦 安装

npm i dom-vcr

🦄 使用

基本使用

import { createVcr } from 'dom-vcr'

const dom = document.querySelector('#app')
const vcr = createVcr(dom)

vcr.record(2000)
  .then(() => vcr.render())
  .then(blob => {
    window.open(URL.createObjectURL(blob))
  })

生成 WEBM

import { createVcr } from 'dom-vcr'

const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
  interval: 1000,
})

async function generate() {
  dom.style.backgroundColor = 'red'
  await vcr.addFrame()
  dom.style.backgroundColor = 'yellow'
  await vcr.addFrame()
  dom.style.backgroundColor = 'green'
  await vcr.addFrame()

  const blob = await vcr.render()
  window.open(URL.createObjectURL(blob))
}

generate()

生成 GIF

需要安装 gif.js

import { createVcr } from 'dom-vcr'
import GIF from 'gif.js'

const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
  interval: 1000,
  gif: new GIF({
    workerScript: './node_modules/gif.js/dist/gif.worker.js',
  }),
})

async function generate() {
  dom.style.backgroundColor = 'red'
  await vcr.addFrame()
  dom.style.backgroundColor = 'yellow'
  await vcr.addFrame()
  dom.style.backgroundColor = 'green'
  await vcr.addFrame()

  const blob = await vcr.render()
  window.open(URL.createObjectURL(blob))
}

generate()

CDN

<script src="https://unpkg.com/dom-vcr"></script>

本作品采用《CC 协议》，转载必须注明作者和本文链接