Generates an video or GIF from a DOM node using HTML5 canvas and SVG
npm install dom-vcrGenerates an video or GIF from a DOM node using HTML5 canvas and SVG
English | 简体中文
``shell
npm i dom-vcr
CDN
`html
`
🦄 Usage
`ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'webm',
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()
`
MP4
> Need install
mp4box 、modern-mp4`ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'mp4',
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
> Need install
modern-gif`ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'gif',
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()
``