实现一个 Code Pen：（六）云函数生成网页缩略图

在信息泛滥的互联网时代，抢夺用户的注意力愈发困难。如何让用户在茫茫信息海中快速了解你的网站内容至关重要，而缩略图就承担了这样的重任。

缩略图的重要性

缩略图，又称封面图，是网站或社交媒体上展示网页内容的小型图片，通常用来吸引用户点击进入正文。一张好的缩略图可以有效提升网站的点击率和转化率。

实现方式

目前，实现网页缩略图的方式主要有两种：

• 客户端生成： 通过 JavaScript 或 HTML Canvas 在浏览器中生成缩略图。
• 服务端生成： 通过后端服务生成缩略图，再返回给前端展示。

客户端生成

客户端生成缩略图的优点是速度快，无需网络请求，缺点是只能生成当前浏览器的渲染结果，无法获取整个网页的完整内容。

服务端生成

服务端生成缩略图的优点是可以获取整个网页的完整内容，生成更准确的缩略图，缺点是需要网络请求，速度相对较慢。

云函数生成

本文将重点介绍利用云函数生成网页缩略图的方法。云函数是一种无服务器计算服务，可以根据需要自动触发代码执行，非常适合处理需要按需执行的任务，例如生成缩略图。

阿里云、腾讯云和 Vercel

目前，主流云服务商阿里云、腾讯云和 Vercel 都提供了生成浏览器截图的功能，方便开发者快速实现网页缩略图。

• 阿里云： 阿里云 Function Compute 提供了网页截图功能，可以生成指定 URL 网页的缩略图。
• 腾讯云： 腾讯云 Serverless 提供了网页截图功能，支持生成指定 URL 网页的缩略图，还可以自定义缩略图大小和格式。
• Vercel： Vercel 提供了 Vercel CLI 工具，其中包含一个 vercel screenshot 命令，可以生成指定 URL 网页的缩略图。

实现步骤

以阿里云 Function Compute 为例，实现步骤如下：

1. 创建一个 Function Compute 函数，并选择 Node.js 作为运行时。
2. 安装 puppeteer 包，用于控制无头浏览器。
3. 在函数代码中，使用 puppeteer 访问指定 URL 网页，并截取页面内容为缩略图。
4. 将缩略图返回给前端，并保存到服务器或云存储中。

示例代码

const puppeteer = require('puppeteer');

exports.handler = async (event, context) => {
  const { url } = event.queryStringParameters;

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const screenshot = await page.screenshot();
  await browser.close();

  return {
    statusCode: 200,
    headers: { 'Content-Type': 'image/png' },
    body: screenshot.toString('base64'),
  };
};

Code Pen 演示

本文对应的 Code Pen 演示了如何使用阿里云 Function Compute 生成网页缩略图。