装置

npm i dom-vcr

应用

录制 2s 生成 4 帧 GIF

须要装置 gif.js
import { createVcr } from 'dom-vcr'import GIF from 'gif.js'const dom = document.querySelector('#app')const vcr = createVcr(dom, {  interval: 500,  gif: new GIF({    workerScript: './node_modules/gif.js/dist/gif.worker.js',  }),})vcr.record(2000)  .then(() => vcr.render())  .then(blob => {    window.open(URL.createObjectURL(blob))  })

手动加帧生成 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>

github https://github.com/qq15725/do...