89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
/**
|
||
* ═══════════════════════════════════════════════════
|
||
* 铸渊图片工作室 · Puppeteer 渲染引擎
|
||
* ═══════════════════════════════════════════════════
|
||
*/
|
||
|
||
import puppeteer from 'puppeteer'
|
||
import { existsSync, mkdirSync } from 'fs'
|
||
import { join, dirname } from 'path'
|
||
import { fileURLToPath } from 'url'
|
||
|
||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||
const OUTPUT_DIR = join(__dirname, 'output')
|
||
|
||
/**
|
||
* 渲染 HTML 为图片
|
||
* @param {string} html - 完整 HTML 字符串
|
||
* @param {object} opts
|
||
* @param {number} opts.width - 图片宽度
|
||
* @param {number} opts.height - 图片高度
|
||
* @param {string} opts.name - 输出文件名（不含扩展名）
|
||
* @param {string} opts.format - 输出格式 png/webp/jpeg
|
||
* @param {number} opts.quality- 图片质量（仅 webp/jpeg）
|
||
* @returns {Promise<string>} 输出文件路径
|
||
*/
|
||
export async function renderToImage(html, opts = {}) {
|
||
const {
|
||
width = 1080,
|
||
height = 1440,
|
||
name = `card_${Date.now()}`,
|
||
format = 'png',
|
||
quality = 90,
|
||
} = opts
|
||
|
||
if (!existsSync(OUTPUT_DIR)) mkdirSync(OUTPUT_DIR, { recursive: true })
|
||
|
||
const browser = await puppeteer.launch({
|
||
headless: true,
|
||
executablePath: '/usr/bin/google-chrome',
|
||
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-features=TranslateUI', '--font-render-hinting=none'],
|
||
})
|
||
|
||
try {
|
||
const page = await browser.newPage()
|
||
await page.setViewport({ width, height })
|
||
|
||
// 注入完整的 HTML
|
||
await page.setContent(html, { waitUntil: 'networkidle0' })
|
||
|
||
// 等待字体加载
|
||
await page.evaluate(() => document.fonts.ready)
|
||
|
||
// 额外等一会儿让渲染稳定
|
||
await new Promise(r => setTimeout(r, 500))
|
||
|
||
const outputPath = join(OUTPUT_DIR, `${name}.${format}`)
|
||
|
||
await page.screenshot({
|
||
path: outputPath,
|
||
type: format,
|
||
clip: { x: 0, y: 0, width, height },
|
||
quality: format !== 'png' ? quality : undefined,
|
||
})
|
||
|
||
return outputPath
|
||
} finally {
|
||
await browser.close()
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 批量生成多页（轮播图）
|
||
* @param {string[]} pages - 每页的 HTML
|
||
* @param {object} opts
|
||
* @returns {Promise<string[]>} 输出文件路径数组
|
||
*/
|
||
export async function renderCarousel(pages, opts = {}) {
|
||
const results = []
|
||
for (let i = 0; i < pages.length; i++) {
|
||
const name = opts.baseName
|
||
? `${opts.baseName}_p${i + 1}`
|
||
: `carousel_${Date.now()}_p${i + 1}`
|
||
const path = await renderToImage(pages[i], { ...opts, name })
|
||
results.push(path)
|
||
}
|
||
return results
|
||
}
|