前几天看到@徐小夕的文章，生成抖音格调的gif图，感觉蛮好玩的。于是本人写了一个生成赛博朋克格调2077格调的gif图生成器。

原理和徐小夕一样，应用dom-to-image每距离16ms生成一张图片，而后应用gif.js将图片合成gif图。

生成gif图源码如下????

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Cyberpunk</title>  <link rel="stylesheet" href="./index.css" />  <script src="gif.js"></script>  <script src="gif.worker.js"></script>  <script src="dom-to-image.min.js"></script></head><body>  <div id="root">    <div id="content">      <h1 id="title">Cyberpunk</h1>      <div id="picture-tube"></div>    </div>    <button id="export-gif">&nbsp;&nbsp;&nbsp;&nbsp;导出gif(多等一会, 如果Chrome提醒拦挡窗口，请容许弹出窗口)&nbsp;&nbsp;&nbsp;&nbsp;</button>    <input id="form" />    <button id="change">批改</button>  </div>  <div id="warehouse"></div>  <script>    const warehouse = document.getElementById('warehouse');    const content = document.getElementById('content');    const exportGif = document.getElementById('export-gif');    const form = document.getElementById('form');    const change = document.getElementById('change');    const title = document.getElementById('title');    const createImgs = async function () {      warehouse.innerHTML = '';      const tasks = [];      for (let i = 1; i < 60; i++) {        tasks.push(new Promise((resolve, reject) => {          setTimeout(() => {            domtoimage.toPng(content).then((url) => {              const img = new Image();              img.src = url;              img.style.display = 'none';              warehouse.appendChild(img);              resolve(img);            }).catch((error) => {              reject(error)            })          }, i * 16);        }))      }      return Promise.all(tasks);    }    const createGif = async function () {      const imgs = warehouse.getElementsByTagName('img');      const gif = new GIF({        workers: 4,        quality: 5,        width: 580,        height: 200,        background: '#fff'      });      for (let i = 0; i < imgs.length; i++) {        gif.addFrame(imgs[i], {delay: 16});      }      gif.on('finished', function(blob) {        window.open(URL.createObjectURL(blob));      });      gif.render();    }    const gif = async () => {      await createImgs();      await createGif();    }    exportGif.addEventListener('click', gif);    change.addEventListener('click', function () {      title.innerHTML = form.value;    })  </script></body></html>

最初的成果????

字体应用了赛博朋克的字体，字体抖动款式应用text-shadow实现。

全副源码地址：https://github.com/peoplesing...