mirror of
https://github.com/Jerryplusy/crystelf-plugin.git
synced 2025-12-05 15:41:56 +00:00
feat:优化截图
This commit is contained in:
parent
7b5508b331
commit
f62e5dc405
@ -2,8 +2,9 @@ import ConfigControl from "../config/configControl.js";
|
||||
import puppeteer from 'puppeteer';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import markdownit from 'markdown-it';
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
//渲染器
|
||||
class Renderer {
|
||||
constructor() {
|
||||
this.browser = null;
|
||||
@ -20,38 +21,32 @@ class Renderer {
|
||||
});
|
||||
this.isInitialized = true;
|
||||
} catch (error) {
|
||||
logger.error(`[crystelf-renderer] 初始化失败: ${error.message}`);
|
||||
console.error(`[crystelf-renderer] 初始化失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染代码为图片
|
||||
* @param code 代码
|
||||
* @param language 语言
|
||||
* @returns {Promise<null|string>}
|
||||
*/
|
||||
async renderCode(code, language = 'text') {
|
||||
if (!this.isInitialized) {
|
||||
await this.init();
|
||||
}
|
||||
if (!this.isInitialized) await this.init();
|
||||
|
||||
try {
|
||||
const page = await this.browser.newPage();
|
||||
const codeConfig = this.config?.codeRenderer || {};
|
||||
const html = this.generateCodeHTML(code, language, codeConfig);
|
||||
await page.setContent(html);
|
||||
await page.setViewport({ width: 800, height: 600 });
|
||||
const tempDir = path.join(process.cwd(), 'temp', 'html');
|
||||
if (!fs.existsSync(tempDir)) {
|
||||
fs.mkdirSync(tempDir, { recursive: true });
|
||||
}
|
||||
const filename = `code_${Date.now()}.png`;
|
||||
const filepath = path.join(tempDir, filename);
|
||||
await page.screenshot({
|
||||
path: filepath,
|
||||
fullPage: true,
|
||||
type: 'png'
|
||||
const html = this.getCodeTemplate(code, language, this.config?.codeRenderer || {});
|
||||
await page.setContent(html, { waitUntil: 'networkidle0' });
|
||||
await page.waitForSelector('#render-complete', { timeout: 5000 });
|
||||
const rect = await page.evaluate(() => {
|
||||
const body = document.body;
|
||||
return { width: body.scrollWidth, height: body.scrollHeight };
|
||||
});
|
||||
await page.setViewport({
|
||||
width: Math.ceil(rect.width),
|
||||
height: Math.ceil(rect.height)
|
||||
});
|
||||
|
||||
const tempDir = path.join(process.cwd(), 'temp', 'html');
|
||||
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
|
||||
const filepath = path.join(tempDir, `code_${Date.now()}.png`);
|
||||
|
||||
await page.screenshot({ path: filepath, fullPage: false });
|
||||
await page.close();
|
||||
logger.info(`[crystelf-ai] 代码渲染完成: ${filepath}`);
|
||||
return filepath;
|
||||
@ -61,32 +56,30 @@ class Renderer {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染md为图片
|
||||
* @param markdown
|
||||
* @returns {Promise<null|string>}
|
||||
*/
|
||||
async renderMarkdown(markdown) {
|
||||
if (!this.isInitialized) {
|
||||
await this.init();
|
||||
}
|
||||
if (!this.isInitialized) await this.init();
|
||||
|
||||
try {
|
||||
const page = await this.browser.newPage();
|
||||
const markdownConfig = this.config?.markdownRenderer || {};
|
||||
const html = this.generateMarkdownHTML(markdown, markdownConfig);
|
||||
await page.setContent(html);
|
||||
await page.setViewport({ width: 800, height: 600 });
|
||||
const tempDir = path.join(process.cwd(), 'temp', 'html');
|
||||
if (!fs.existsSync(tempDir)) {
|
||||
fs.mkdirSync(tempDir, { recursive: true });
|
||||
}
|
||||
const filename = `markdown_${Date.now()}.png`;
|
||||
const filepath = path.join(tempDir, filename);
|
||||
await page.screenshot({
|
||||
path: filepath,
|
||||
fullPage: true,
|
||||
type: 'png'
|
||||
const html = this.getMarkdownTemplate(markdown, this.config?.markdownRenderer || {});
|
||||
|
||||
await page.setContent(html, { waitUntil: 'networkidle0' });
|
||||
await page.waitForSelector('#render-complete', { timeout: 5000 });
|
||||
|
||||
const rect = await page.evaluate(() => {
|
||||
const body = document.body;
|
||||
return { width: body.scrollWidth, height: body.scrollHeight };
|
||||
});
|
||||
await page.setViewport({
|
||||
width: Math.ceil(rect.width),
|
||||
height: Math.ceil(rect.height)
|
||||
});
|
||||
|
||||
const tempDir = path.join(process.cwd(), 'temp', 'html');
|
||||
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
|
||||
const filepath = path.join(tempDir, `markdown_${Date.now()}.png`);
|
||||
|
||||
await page.screenshot({ path: filepath, fullPage: false });
|
||||
await page.close();
|
||||
logger.info(`[crystelf-ai] Markdown渲染完成: ${filepath}`);
|
||||
return filepath;
|
||||
@ -96,143 +89,146 @@ class Renderer {
|
||||
}
|
||||
}
|
||||
|
||||
getCodeTemplate(code, language = "text", config = {}) {
|
||||
const themeColor = "#0f172a";
|
||||
const fontSize = config.fontSize || 16;
|
||||
const escapedCode = this.escapeHtml(code);
|
||||
|
||||
/**
|
||||
* 生成代码html
|
||||
* @param code 代码内容
|
||||
* @param language 语言
|
||||
* @param config 配置
|
||||
* @returns {string}
|
||||
*/
|
||||
generateCodeHTML(code, language, config) {
|
||||
const theme = config.theme || 'github';
|
||||
const fontSize = config.fontSize || 14;
|
||||
const lineNumbers = config.lineNumbers !== false;
|
||||
const backgroundColor = config.backgroundColor || '#f6f8fa';
|
||||
const colorMap = {
|
||||
javascript: "from-yellow-400 to-yellow-600",
|
||||
typescript: "from-blue-400 to-blue-600",
|
||||
python: "from-cyan-400 to-cyan-600",
|
||||
html: "from-orange-400 to-red-500",
|
||||
css: "from-indigo-400 to-indigo-600",
|
||||
json: "from-emerald-400 to-emerald-600",
|
||||
yaml: "from-amber-400 to-amber-600",
|
||||
c: "from-blue-300 to-blue-500",
|
||||
cpp: "from-blue-400 to-indigo-600",
|
||||
java: "from-red-400 to-orange-500",
|
||||
kotlin: "from-pink-400 to-purple-500",
|
||||
csharp: "from-violet-400 to-purple-600",
|
||||
'c#': "from-violet-400 to-purple-600",
|
||||
dotnet: "from-purple-400 to-indigo-600",
|
||||
bash: "from-gray-400 to-gray-600",
|
||||
shell: "from-gray-400 to-gray-600",
|
||||
text: "from-slate-400 to-slate-600",
|
||||
};
|
||||
const barColor = colorMap[language.toLowerCase()] || "from-cyan-400 to-cyan-600";
|
||||
const highlightedCode = hljs.highlight(code, { language }).value;
|
||||
const lines = highlightedCode.split('\n').map((line, i) => `
|
||||
<div class="line">
|
||||
<span class="line-number">${i + 1}</span>
|
||||
<span class="line-content">${line}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Code Render</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-${theme}.min.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: ${backgroundColor};
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
|
||||
body { background-color: ${themeColor}; margin: 0; padding: 20px; font-family: 'Fira Code', monospace; }
|
||||
.code-container {
|
||||
background-color: rgba(30, 41, 59, 0.8);
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
.code-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.language-tag {
|
||||
background-image: linear-gradient(to right, ${barColor.replace('-', ' ')});
|
||||
color: white;
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
.code-body {
|
||||
padding: 15px;
|
||||
font-size: ${fontSize}px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
background-color: white;
|
||||
border: 1px solid #e1e4e8;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
code {
|
||||
font-family: inherit;
|
||||
}
|
||||
${lineNumbers ? `
|
||||
.line-numbers {
|
||||
counter-reset: line;
|
||||
}
|
||||
.line-numbers .line-number {
|
||||
counter-increment: line;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.line-numbers .line-number:before {
|
||||
content: counter(line);
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
width: 2em;
|
||||
}
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.line-number {
|
||||
text-align: right;
|
||||
color: #6a737d;
|
||||
margin-right: 15px;
|
||||
color: #9ca3af;
|
||||
user-select: none;
|
||||
}
|
||||
` : ''}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="language-${language}${lineNumbers ? ' line-numbers' : ''}"><code>${this.escapeHtml(code)}</code></pre>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="code-container">
|
||||
<div class="code-header">
|
||||
<span class="language-tag">${language}</span>
|
||||
</div>
|
||||
<div class="code-body">
|
||||
<pre><code class="hljs ${language}">${lines}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="render-complete"></div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成Markdown HTML
|
||||
* @param {string} markdown Markdown内容
|
||||
* @param {Object} config 配置
|
||||
* @returns {string} HTML内容
|
||||
*/
|
||||
generateMarkdownHTML(markdown, config) {
|
||||
const theme = config.theme || 'light';
|
||||
const fontSize = config.fontSize || 14;
|
||||
const codeTheme = config.codeTheme || 'github';
|
||||
getMarkdownTemplate(markdown, config = {}) {
|
||||
const themeColor = "#0f172a";
|
||||
const fontSize = config.fontSize || 18;
|
||||
const md = markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return '<pre class="hljs"><code>' +
|
||||
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
|
||||
'</code></pre>';
|
||||
} catch (__) {}
|
||||
}
|
||||
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
|
||||
}
|
||||
});
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Markdown Render</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-${theme}.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-${codeTheme}.min.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-size: ${fontSize}px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.markdown-body {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
${theme === 'dark' ? `
|
||||
.markdown-body {
|
||||
background-color: #0d1117;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
` : ''}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="markdown-body">
|
||||
<div id="markdown-content"></div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
<script>
|
||||
const markdown = \`${this.escapeHtml(markdown)}\`;
|
||||
document.getElementById('markdown-content').innerHTML = marked.parse(markdown);
|
||||
Prism.highlightAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: ${themeColor}; color: #e2e8f0; font-family: 'Noto Sans SC', sans-serif; font-size: ${fontSize}px; line-height: 1.6; margin: 0; padding: 20px; }
|
||||
h1, h2, h3, h4, h5, h6 { color: #f1f5f9; border-bottom: 1px solid #334155; padding-bottom: 5px; }
|
||||
a { color: #38bdf8; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
code { background-color: #1e293b; padding: 2px 5px; border-radius: 5px; }
|
||||
pre { background-color: #1e293b; padding: 15px; border-radius: 10px; overflow-x: auto; }
|
||||
blockquote { border-left: 4px solid #334155; padding-left: 15px; color: #9ca3af; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${md.render(markdown)}
|
||||
<div id="render-complete"></div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
|
||||
return text.replace(/[&<>"']/g, (m) => map[m]);
|
||||
}
|
||||
|
||||
|
||||
@ -19,6 +19,8 @@
|
||||
"axios": "^1.8.4",
|
||||
"chalk": "^5.4.1",
|
||||
"form-data": "^4.0.2",
|
||||
"highlight.js": "^11.11.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"openai": "^4.89.0",
|
||||
"pinyin-pro": "^3.27.0",
|
||||
"rss-parser": "^3.13.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user