赛博朋克2077

时间 2020-11-20 标签 css html git github app dom async 字体 url spa

前几天看到@徐小夕的文章，生成抖音风格的gif图，以为蛮好玩的。因而本身写了一个生成赛博朋克风格2077风格的gif图生成器。css

原理和徐小夕同样，使用dom-to-image每间隔16ms生成一张图片，而后使用gif.js将图片合成gif图。html

生成gif图源码以下👇git

<!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>

最后的效果👇github

字体使用了赛博朋克的字体，字体抖动样式使用text-shadow实现。app

所有源码地址：https://github.com/peoplesing...dom