前几天看到@徐小夕的文章，生成抖音风格的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"> 导出gif(多等一会, 如果Chrome提示拦截窗口，请允许弹出窗口) </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实现。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。