通用海报截图脚本

项目简介

本项目基于 Nuxt.js 搭建，提供通用的海报截图功能：

1. 截图接口实现：server/api/poster.post.ts，为其他端提供接口，返回生成的图片。
2. 数据中转接口：server/api/data.get.ts，为 poster.post.ts 中的 data 提供数据中转，使 pages 目录下的 Vue 文件能够正常渲染。
3. 海报页面渲染：pages/xxx.vue，主要负责海报的客户端渲染。

接口参数说明

以下是截图接口的参数类型定义及详细说明：

interface BodyType {
	// 截图目标网页地址
	url: string;
	// 渲染数据
	data: Record<string, any> | any[];
	// 指定的 DOM 元素选择器（可选），默认为 body
	selector?: string;
	// 是否使用移动端画布（可选），默认为 false
	isMobile?: boolean;
	// Puppeteer 的 screenshot 自定义参数（可选），默认为 {}
	screenshot?: ScreenshotOptions;
}

参数详情

• url (必填): 目标网页的 URL 地址，用于指定需要生成海报的页面。
• data (必填): 渲染所需的数据，支持对象或数组格式。
• selector (可选): 指定需要截图的 DOM 元素选择器，默认为整个页面 (body)。
• isMobile (可选): 是否使用移动端画布，默认为 false。
• screenshot (可选): 自定义 Puppeteer 的截图参数，支持更精细的截图配置。详细参数说明请参考 Puppeteer 官方文档。