我喜欢使用编程方式生成的图像。 如今，由于无头浏览器的概念，我们前端开发人员可以轻松地实现这种功能。 比如使用 Puppeteer，它是一个用于控制无头 Chrome 的库。 从 URL 生成图片是其默认用例。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();这应该会激发你的想法。 如果我们网站上的 URL 可以利用我们 HTML 和 CSS 技能，生成完美的分享设计，使用动态数据，然后将其转换为图像，并用于我们的 元标签？
我第一次看到这个想法是在 Drew McLellan 的 动态社交分享图像 中。 Drew 编写了一个脚本 来启动 Puppeteer 并完成工作。
由于设计部分完全是 HTML/CSS 的冒险，我相信你可以想象一个设置，其中 URL 传递参数，这些参数可以做的事情包括设置副本和排版、颜色、尺寸等。 Zeit 构建了这样一个功能！
这个 URL 类似于此。
https://og-image.now.sh/I%20am%20Chris%20and%20I%20am%20**cool**%20la%20tee%20ding%20dong%20da..png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fhyper-color-logo.svg在云函数中启动整个浏览器真是太神奇了！ Netlify 也提供 云函数，当我向 Phil Hawksworth 提到这一点时，他告诉我他已经在他的博客中使用了这种功能！
因此，在像 这样的一篇博文中，会自动生成这样的图像。
它会作为元数据插入。
<meta property="og:image" content="https://www.hawksworx.com/card-image/-blog-find-that-at-card.png">我自然地深入研究了 Phil 的仓库，并 找到了他的小机器 来完成这项工作。
我非常嫉妒所有这些，需要为我自己设置一个。