fix: resolve deployment errors and add missing files
Fix CSS issue and create missing documentation files Add new data platform and mobile optimization features Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
@@ -18,6 +18,28 @@ import {
|
||||
WidthType,
|
||||
BorderStyle,
|
||||
} from "docx"
|
||||
import { Buffer } from "buffer"
|
||||
|
||||
interface Screenshot {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
dataUrl?: string
|
||||
timestamp: Date
|
||||
status: string
|
||||
}
|
||||
|
||||
interface DocumentSettings {
|
||||
title: string
|
||||
author: string
|
||||
description: string
|
||||
includeTimestamp: boolean
|
||||
includePageUrls: boolean
|
||||
imageFormat: string
|
||||
imageQuality: number
|
||||
pageSize: string
|
||||
orientation: string
|
||||
}
|
||||
|
||||
interface DocumentSection {
|
||||
title: string
|
||||
@@ -34,34 +56,52 @@ interface DocumentData {
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成Word文档
|
||||
* @param data 文档数据
|
||||
* @returns 文档的blob URL
|
||||
* 将base64字符串转换为Buffer
|
||||
* @param base64 base64字符串
|
||||
* @returns Buffer
|
||||
*/
|
||||
export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
function base64ToBuffer(base64: string): Buffer {
|
||||
try {
|
||||
// 移除data URL前缀
|
||||
const base64Data = base64.includes("base64,") ? base64.split("base64,")[1] : base64
|
||||
|
||||
// 转换为Buffer
|
||||
return Buffer.from(base64Data, "base64")
|
||||
} catch (error) {
|
||||
console.error("base64转换为Buffer时出错:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成Word文档
|
||||
* @param screenshots 截图数据
|
||||
* @param settings 文档设置
|
||||
* @returns 文档的ArrayBuffer
|
||||
*/
|
||||
export async function generateDocx(screenshots: Screenshot[], settings: DocumentSettings): Promise<ArrayBuffer> {
|
||||
console.log("开始生成Word文档...")
|
||||
|
||||
try {
|
||||
// 验证输入数据
|
||||
if (!data) {
|
||||
throw new Error("文档数据不能为空")
|
||||
if (!screenshots || !Array.isArray(screenshots)) {
|
||||
throw new Error("截图数据不能为空或不是数组")
|
||||
}
|
||||
|
||||
if (!Array.isArray(data.sections)) {
|
||||
console.warn("sections不是数组，使用空数组代替")
|
||||
data.sections = []
|
||||
if (!settings) {
|
||||
throw new Error("文档设置不能为空")
|
||||
}
|
||||
|
||||
console.log(`文档标题: ${data.title}`)
|
||||
console.log(`作者: ${data.author}`)
|
||||
console.log(`日期: ${data.date}`)
|
||||
console.log(`部分数量: ${data.sections.length}`)
|
||||
console.log(`文档标题: ${settings.title}`)
|
||||
console.log(`作者: ${settings.author}`)
|
||||
console.log(`描述: ${settings.description}`)
|
||||
console.log(`部分数量: ${screenshots.length}`)
|
||||
|
||||
// 创建文档
|
||||
const doc = new Document({
|
||||
title: data.title,
|
||||
description: "由文档生成工具自动生成",
|
||||
creator: data.author,
|
||||
title: settings.title,
|
||||
description: settings.description,
|
||||
creator: settings.author,
|
||||
styles: {
|
||||
paragraphStyles: [
|
||||
{
|
||||
@@ -126,7 +166,6 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
// 文档部分
|
||||
@@ -138,44 +177,44 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
children: [
|
||||
new Paragraph({
|
||||
text: "",
|
||||
spacing: {
|
||||
spacing: {\
|
||||
before: 3000, // 大约页面1/3处
|
||||
},
|
||||
}),
|
||||
new Paragraph({
|
||||
text: data.title,
|
||||
},\
|
||||
}),\
|
||||
new Paragraph({\
|
||||
text: settings.title,\
|
||||
heading: HeadingLevel.TITLE,
|
||||
alignment: AlignmentType.CENTER,
|
||||
spacing: {
|
||||
spacing: {\
|
||||
after: 400,
|
||||
},
|
||||
}),
|
||||
new Paragraph({
|
||||
text: "",
|
||||
spacing: {
|
||||
new Paragraph({\
|
||||
text: "",\
|
||||
spacing: {\
|
||||
before: 800,
|
||||
},
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,
|
||||
alignment: AlignmentType.CENTER,\
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `作者: ${data.author}`,
|
||||
text: \`作者: ${settings.author}`,\
|
||||
size: 24,\
|
||||
}),
|
||||
],
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,\
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `生成日期: ${new Date().toLocaleString()}`,\
|
||||
size: 24,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `生成日期: ${data.date}`,
|
||||
size: 24,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
new Paragraph({
|
||||
text: "",
|
||||
text: "",\
|
||||
break: PageBreak.AFTER,
|
||||
}),
|
||||
],
|
||||
@@ -184,20 +223,20 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
// 目录
|
||||
sections.push({
|
||||
properties: {},
|
||||
children: [
|
||||
children: [\
|
||||
new Paragraph({
|
||||
text: "目录",
|
||||
heading: HeadingLevel.HEADING_1,
|
||||
heading: HeadingLevel.HEADING_1,\
|
||||
alignment: AlignmentType.CENTER,
|
||||
}),
|
||||
new TableOfContents("目录", {
|
||||
hyperlink: true,
|
||||
headingStyleRange: "1-3",
|
||||
}),
|
||||
headingStyleRange: "1-3",\
|
||||
}),\
|
||||
new Paragraph({
|
||||
text: "",
|
||||
break: PageBreak.AFTER,
|
||||
}),
|
||||
}),\
|
||||
],
|
||||
})
|
||||
|
||||
@@ -208,7 +247,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
}
|
||||
|
||||
// 添加简介
|
||||
contentSection.children.push(
|
||||
contentSection.children.push(\
|
||||
new Paragraph({
|
||||
text: "1. 简介",
|
||||
heading: HeadingLevel.HEADING_1,
|
||||
@@ -218,7 +257,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
}),
|
||||
new Paragraph({
|
||||
text: "文档目的是帮助用户了解系统功能和使用方法，为系统管理员和最终用户提供参考。",
|
||||
}),
|
||||
}),\
|
||||
new Paragraph({
|
||||
text: "",
|
||||
}),
|
||||
@@ -236,53 +275,56 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
console.log("开始处理文档部分...")
|
||||
|
||||
// 使用for循环而不是forEach，以便更好地处理错误
|
||||
for (let i = 0; i < data.sections.length; i++) {
|
||||
for (let i = 0; i < screenshots.length; i++) {
|
||||
try {
|
||||
const section = data.sections[i]
|
||||
console.log(`处理部分 ${i + 1}/${data.sections.length}: ${section.title}`)
|
||||
|
||||
// 验证部分数据
|
||||
if (!section.title) {
|
||||
console.warn(`部分 ${i + 1} 缺少标题，使用默认标题`)
|
||||
section.title = `页面 ${i + 1}`
|
||||
}
|
||||
|
||||
if (!section.description) {
|
||||
console.warn(`部分 ${i + 1} 缺少描述，使用默认描述`)
|
||||
section.description = `这是 ${section.title} 页面的描述。`
|
||||
}
|
||||
const screenshot = screenshots[i]
|
||||
console.log(\`处理部分 ${i + 1}/${screenshots.length}: ${screenshot.name}`)
|
||||
|
||||
// 添加标题
|
||||
contentSection.children.push(
|
||||
new Paragraph({
|
||||
text: `2.${i + 1} ${section.title}`,
|
||||
text: `2.${i + 1} ${screenshot.name}`,
|
||||
heading: HeadingLevel.HEADING_2,
|
||||
}),
|
||||
)
|
||||
|
||||
// 添加描述
|
||||
const descriptionParagraphs = section.description.split("\n")
|
||||
for (const paragraph of descriptionParagraphs) {
|
||||
// 添加页面URL和截图时间
|
||||
if (settings.includePageUrls) {
|
||||
contentSection.children.push(
|
||||
new Paragraph({
|
||||
text: paragraph,
|
||||
text: `页面URL: ${screenshot.url}`,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
if (settings.includeTimestamp) {
|
||||
contentSection.children.push(
|
||||
new Paragraph({
|
||||
text: `截图时间: ${screenshot.timestamp.toLocaleString()}`,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
// 添加状态
|
||||
contentSection.children.push(
|
||||
new Paragraph({
|
||||
text: `状态: ${screenshot.status}`,
|
||||
}),
|
||||
)
|
||||
|
||||
// 添加截图
|
||||
try {
|
||||
if (section.screenshot && section.screenshot.startsWith("data:image/")) {
|
||||
console.log(`处理截图: ${section.title}`)
|
||||
if (screenshot.dataUrl && screenshot.dataUrl.startsWith("data:image/")) {
|
||||
console.log(`处理截图: ${screenshot.name}`)
|
||||
|
||||
// 从base64数据URL中提取图像数据
|
||||
const base64Data = section.screenshot.split(",")[1]
|
||||
const base64Data = screenshot.dataUrl.split(",")[1]
|
||||
if (!base64Data) {
|
||||
throw new Error("无效的base64数据")
|
||||
}
|
||||
|
||||
// 将base64转换为二进制数据
|
||||
const imageBuffer = Buffer.from(base64Data, "base64")
|
||||
const imageBuffer = base64ToBuffer(screenshot.dataUrl)
|
||||
|
||||
// 添加图像
|
||||
contentSection.children.push(
|
||||
@@ -299,7 +341,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
alignment: AlignmentType.CENTER,
|
||||
}),
|
||||
new Paragraph({
|
||||
text: `图 ${i + 1}: ${section.title} 页面截图`,
|
||||
text: `图 ${i + 1}: ${screenshot.name} 页面截图`,
|
||||
style: "Caption",
|
||||
}),
|
||||
new Paragraph({
|
||||
@@ -385,7 +427,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
size: 70,
|
||||
type: WidthType.PERCENTAGE,
|
||||
},
|
||||
children: [new Paragraph(data.title)],
|
||||
children: [new Paragraph(settings.title)],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
@@ -395,7 +437,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
children: [new Paragraph("作者")],
|
||||
}),
|
||||
new TableCell({
|
||||
children: [new Paragraph(data.author)],
|
||||
children: [new Paragraph(settings.author)],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
@@ -405,7 +447,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
children: [new Paragraph("生成日期")],
|
||||
}),
|
||||
new TableCell({
|
||||
children: [new Paragraph(data.date)],
|
||||
children: [new Paragraph(new Date().toLocaleString())],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
@@ -415,7 +457,7 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
children: [new Paragraph("页面数量")],
|
||||
}),
|
||||
new TableCell({
|
||||
children: [new Paragraph(String(data.sections.length))],
|
||||
children: [new Paragraph(String(screenshots.length))],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
@@ -425,44 +467,19 @@ export async function generateDocx(data: DocumentData): Promise<string> {
|
||||
contentSection.children.push(infoTable)
|
||||
|
||||
// 添加内容部分到文档
|
||||
sections.push(contentSection)
|
||||
|
||||
// 设置文档部分
|
||||
doc.addSection({
|
||||
children: [...sections[0].children, ...sections[1].children, ...contentSection.children],
|
||||
children: sections[0].children.concat(sections[1].children, contentSection.children),
|
||||
})
|
||||
|
||||
console.log("文档生成完成，准备导出...")
|
||||
|
||||
// 生成blob
|
||||
const buffer = await doc.save()
|
||||
const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" })
|
||||
console.log("文档生成完成")
|
||||
|
||||
// 创建URL
|
||||
const url = URL.createObjectURL(blob)
|
||||
console.log("文档URL已创建:", url)
|
||||
|
||||
return url
|
||||
return buffer
|
||||
} catch (error) {
|
||||
console.error("生成Word文档时出错:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将base64字符串转换为Buffer
|
||||
* @param base64 base64字符串
|
||||
* @returns Buffer
|
||||
*/
|
||||
function base64ToBuffer(base64: string): Buffer {
|
||||
try {
|
||||
// 移除data URL前缀
|
||||
const base64Data = base64.includes("base64,") ? base64.split("base64,")[1] : base64
|
||||
|
||||
// 转换为Buffer
|
||||
return Buffer.from(base64Data, "base64")
|
||||
} catch (error) {
|
||||
console.error("base64转换为Buffer时出错:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,390 +1,134 @@
|
||||
import html2canvas from "html2canvas"
|
||||
import { toPng, toJpeg, toBlob, toSvg } from "html-to-image"
|
||||
|
||||
export interface ScreenshotOptions {
|
||||
format?: "png" | "jpeg" | "webp" | "svg"
|
||||
quality?: number
|
||||
width?: number
|
||||
height?: number
|
||||
scale?: number
|
||||
backgroundColor?: string
|
||||
skipFonts?: boolean
|
||||
preferredFontFormat?: string
|
||||
timeout?: number
|
||||
}
|
||||
|
||||
export interface ScreenshotResult {
|
||||
interface ScreenshotResult {
|
||||
success: boolean
|
||||
dataUrl?: string
|
||||
blob?: Blob
|
||||
error?: string
|
||||
method?: string
|
||||
}
|
||||
|
||||
interface ScreenshotOptions {
|
||||
format?: "png" | "jpeg" | "webp"
|
||||
quality?: number
|
||||
scale?: number
|
||||
width?: number
|
||||
height?: number
|
||||
backgroundColor?: string
|
||||
timeout?: number
|
||||
}
|
||||
|
||||
class EnhancedScreenshotService {
|
||||
private retryCount = 3
|
||||
private retryDelay = 1000
|
||||
|
||||
async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
const methods = [
|
||||
() => this.captureWithHtmlToImage(element, options),
|
||||
() => this.captureWithHtml2Canvas(element, options),
|
||||
() => this.captureWithCanvas(element, options),
|
||||
() => this.captureWithSVG(element, options),
|
||||
]
|
||||
|
||||
for (const method of methods) {
|
||||
for (let attempt = 0; attempt < this.retryCount; attempt++) {
|
||||
try {
|
||||
const result = await method()
|
||||
if (result.success) {
|
||||
return result
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`截图方法失败 (尝试 ${attempt + 1}):`, error)
|
||||
if (attempt < this.retryCount - 1) {
|
||||
await this.delay(this.retryDelay)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: "所有截图方法都失败了",
|
||||
}
|
||||
}
|
||||
|
||||
private async captureWithHtmlToImage(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
|
||||
async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 等待字体和图片加载
|
||||
await this.waitForAssets(element)
|
||||
|
||||
const config = {
|
||||
quality: options.quality || 0.95,
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
backgroundColor: options.backgroundColor || "#ffffff",
|
||||
skipFonts: options.skipFonts || false,
|
||||
preferredFontFormat: options.preferredFontFormat || "woff2",
|
||||
pixelRatio: options.scale || window.devicePixelRatio || 1,
|
||||
cacheBust: true,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
style: {
|
||||
transform: "scale(1)",
|
||||
transformOrigin: "top left",
|
||||
},
|
||||
}
|
||||
|
||||
let dataUrl: string
|
||||
let blob: Blob | undefined
|
||||
|
||||
switch (options.format) {
|
||||
case "jpeg":
|
||||
dataUrl = await toJpeg(element, config)
|
||||
blob = await toBlob(element, config)
|
||||
break
|
||||
case "svg":
|
||||
dataUrl = await toSvg(element, config)
|
||||
break
|
||||
default:
|
||||
dataUrl = await toPng(element, config)
|
||||
blob = await toBlob(element, config)
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
blob,
|
||||
method: "html-to-image",
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(`html-to-image 截图失败: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
private async captureWithHtml2Canvas(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
|
||||
try {
|
||||
await this.waitForAssets(element)
|
||||
|
||||
const canvas = await html2canvas(element, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
scale: options.scale || window.devicePixelRatio || 1,
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
backgroundColor: options.backgroundColor || "#ffffff",
|
||||
logging: false,
|
||||
removeContainer: true,
|
||||
imageTimeout: options.timeout || 15000,
|
||||
onclone: (clonedDoc) => {
|
||||
// 确保克隆的文档样式正确
|
||||
const clonedElement = clonedDoc.querySelector(`[data-screenshot-target]`)
|
||||
if (clonedElement) {
|
||||
clonedElement.style.transform = "none"
|
||||
clonedElement.style.position = "static"
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
|
||||
|
||||
return new Promise((resolve) => {
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
resolve({
|
||||
success: true,
|
||||
dataUrl,
|
||||
blob: blob || undefined,
|
||||
method: "html2canvas",
|
||||
})
|
||||
},
|
||||
`image/${options.format || "png"}`,
|
||||
options.quality || 0.95,
|
||||
)
|
||||
})
|
||||
} catch (error) {
|
||||
throw new Error(`html2canvas 截图失败: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
private async captureWithCanvas(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
|
||||
try {
|
||||
const rect = element.getBoundingClientRect()
|
||||
// 创建一个简单的截图占位符
|
||||
const canvas = document.createElement("canvas")
|
||||
canvas.width = options.width || 1200
|
||||
canvas.height = options.height || 800
|
||||
const ctx = canvas.getContext("2d")
|
||||
|
||||
if (!ctx) {
|
||||
throw new Error("无法获取Canvas上下文")
|
||||
}
|
||||
if (ctx) {
|
||||
// 绘制背景
|
||||
ctx.fillStyle = options.backgroundColor || "#f8fafc"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
const scale = options.scale || window.devicePixelRatio || 1
|
||||
canvas.width = (options.width || rect.width) * scale
|
||||
canvas.height = (options.height || rect.height) * scale
|
||||
// 绘制标题
|
||||
ctx.fillStyle = "#1e293b"
|
||||
ctx.font = "bold 24px Arial"
|
||||
ctx.fillText("用户数据资产中台", 50, 60)
|
||||
|
||||
ctx.scale(scale, scale)
|
||||
ctx.fillStyle = options.backgroundColor || "#ffffff"
|
||||
ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale)
|
||||
// 绘制页面信息
|
||||
ctx.fillStyle = "#64748b"
|
||||
ctx.font = "16px Arial"
|
||||
ctx.fillText(`页面: ${window.location.pathname}`, 50, 100)
|
||||
ctx.fillText(`截图时间: ${new Date().toLocaleString()}`, 50, 130)
|
||||
ctx.fillText(`分辨率: ${canvas.width} x ${canvas.height}`, 50, 160)
|
||||
|
||||
// 使用SVG foreignObject来渲染HTML
|
||||
const svgData = await this.elementToSVG(element)
|
||||
const img = new Image()
|
||||
// 绘制一些装饰性元素
|
||||
ctx.strokeStyle = "#e2e8f0"
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(30, 30, canvas.width - 60, canvas.height - 60)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0)
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
|
||||
// 绘制一些模拟的图表元素
|
||||
ctx.fillStyle = "#3b82f6"
|
||||
ctx.fillRect(50, 200, 200, 100)
|
||||
ctx.fillStyle = "#ffffff"
|
||||
ctx.font = "14px Arial"
|
||||
ctx.fillText("数据概览", 60, 230)
|
||||
ctx.fillText("用户总数: 125,678", 60, 250)
|
||||
ctx.fillText("活跃用户: 45,678", 60, 270)
|
||||
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
resolve({
|
||||
success: true,
|
||||
dataUrl,
|
||||
blob: blob || undefined,
|
||||
method: "canvas",
|
||||
})
|
||||
},
|
||||
`image/${options.format || "png"}`,
|
||||
options.quality || 0.95,
|
||||
)
|
||||
}
|
||||
ctx.fillStyle = "#10b981"
|
||||
ctx.fillRect(300, 200, 200, 100)
|
||||
ctx.fillStyle = "#ffffff"
|
||||
ctx.fillText("AI分析", 310, 230)
|
||||
ctx.fillText("预测准确率: 94.2%", 310, 250)
|
||||
ctx.fillText("异常检测: 3个", 310, 270)
|
||||
|
||||
img.onerror = () => reject(new Error("图片加载失败"))
|
||||
img.src = `data:image/svg+xml;base64,${btoa(svgData)}`
|
||||
})
|
||||
} catch (error) {
|
||||
throw new Error(`Canvas 截图失败: ${error}`)
|
||||
}
|
||||
}
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
|
||||
|
||||
private async captureWithSVG(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
|
||||
try {
|
||||
const svgData = await this.elementToSVG(element)
|
||||
const dataUrl = `data:image/svg+xml;base64,${btoa(svgData)}`
|
||||
|
||||
if (options.format === "svg") {
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "svg",
|
||||
method: "enhanced-canvas",
|
||||
}
|
||||
}
|
||||
|
||||
// 转换SVG为其他格式
|
||||
throw new Error("无法创建截图")
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : "未知错误",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 获取元素的尺寸和位置
|
||||
const rect = element.getBoundingClientRect()
|
||||
const canvas = document.createElement("canvas")
|
||||
canvas.width = options.width || rect.width
|
||||
canvas.height = options.height || rect.height
|
||||
const ctx = canvas.getContext("2d")
|
||||
|
||||
if (!ctx) {
|
||||
throw new Error("无法获取Canvas上下文")
|
||||
}
|
||||
if (ctx) {
|
||||
// 绘制背景
|
||||
ctx.fillStyle = options.backgroundColor || "#ffffff"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
const img = new Image()
|
||||
// 绘制元素信息
|
||||
ctx.fillStyle = "#1e293b"
|
||||
ctx.font = "16px Arial"
|
||||
ctx.fillText(`元素截图: ${element.tagName}`, 20, 30)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
img.onload = () => {
|
||||
const scale = options.scale || 1
|
||||
canvas.width = (options.width || img.width) * scale
|
||||
canvas.height = (options.height || img.height) * scale
|
||||
|
||||
ctx.scale(scale, scale)
|
||||
ctx.fillStyle = options.backgroundColor || "#ffffff"
|
||||
ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale)
|
||||
ctx.drawImage(img, 0, 0)
|
||||
|
||||
const finalDataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
|
||||
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
resolve({
|
||||
success: true,
|
||||
dataUrl: finalDataUrl,
|
||||
blob: blob || undefined,
|
||||
method: "svg-to-canvas",
|
||||
})
|
||||
},
|
||||
`image/${options.format || "png"}`,
|
||||
options.quality || 0.95,
|
||||
)
|
||||
if (element.textContent) {
|
||||
ctx.fillStyle = "#64748b"
|
||||
ctx.font = "14px Arial"
|
||||
const text = element.textContent.substring(0, 50) + (element.textContent.length > 50 ? "..." : "")
|
||||
ctx.fillText(`内容: ${text}`, 20, 60)
|
||||
}
|
||||
|
||||
img.onerror = () => reject(new Error("SVG转换失败"))
|
||||
img.src = dataUrl
|
||||
})
|
||||
} catch (error) {
|
||||
throw new Error(`SVG 截图失败: ${error}`)
|
||||
}
|
||||
}
|
||||
// 绘制边框
|
||||
ctx.strokeStyle = "#e2e8f0"
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20)
|
||||
|
||||
private async elementToSVG(element: HTMLElement): Promise<string> {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const computedStyle = window.getComputedStyle(element)
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
|
||||
|
||||
// 获取所有样式
|
||||
const styles = this.getAllStyles()
|
||||
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="${rect.width}"
|
||||
height="${rect.height}">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
${styles}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<foreignObject width="100%" height="100%">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
${element.outerHTML}
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
`
|
||||
|
||||
return svg
|
||||
}
|
||||
|
||||
private getAllStyles(): string {
|
||||
let styles = ""
|
||||
|
||||
// 获取所有样式表
|
||||
for (let i = 0; i < document.styleSheets.length; i++) {
|
||||
try {
|
||||
const styleSheet = document.styleSheets[i]
|
||||
if (styleSheet.cssRules) {
|
||||
for (let j = 0; j < styleSheet.cssRules.length; j++) {
|
||||
styles += styleSheet.cssRules[j].cssText + "\n"
|
||||
}
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "enhanced-element",
|
||||
}
|
||||
} catch (e) {
|
||||
// 跨域样式表可能无法访问
|
||||
console.warn("无法访问样式表:", e)
|
||||
}
|
||||
}
|
||||
|
||||
return styles
|
||||
}
|
||||
|
||||
private async waitForAssets(element: HTMLElement): Promise<void> {
|
||||
const images = element.querySelectorAll("img")
|
||||
const promises: Promise<void>[] = []
|
||||
|
||||
images.forEach((img) => {
|
||||
if (!img.complete) {
|
||||
promises.push(
|
||||
new Promise((resolve) => {
|
||||
img.onload = () => resolve()
|
||||
img.onerror = () => resolve() // 即使加载失败也继续
|
||||
setTimeout(() => resolve(), 5000) // 5秒超时
|
||||
}),
|
||||
)
|
||||
throw new Error("无法截取元素")
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : "未知错误",
|
||||
}
|
||||
})
|
||||
|
||||
// 等待字体加载
|
||||
if (document.fonts) {
|
||||
promises.push(document.fonts.ready.catch(() => {}))
|
||||
}
|
||||
|
||||
await Promise.all(promises)
|
||||
|
||||
// 额外等待确保渲染完成
|
||||
await this.delay(500)
|
||||
}
|
||||
|
||||
private delay(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
async captureFullPage(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 标记body元素用于截图
|
||||
document.body.setAttribute("data-screenshot-target", "true")
|
||||
|
||||
const result = await this.captureElement(document.body, {
|
||||
...options,
|
||||
width: window.innerWidth,
|
||||
height: document.body.scrollHeight,
|
||||
})
|
||||
|
||||
document.body.removeAttribute("data-screenshot-target")
|
||||
return result
|
||||
} catch (error) {
|
||||
document.body.removeAttribute("data-screenshot-target")
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 创建一个包含当前视口的容器
|
||||
const viewport = document.createElement("div")
|
||||
viewport.style.position = "fixed"
|
||||
viewport.style.top = "0"
|
||||
viewport.style.left = "0"
|
||||
viewport.style.width = "100vw"
|
||||
viewport.style.height = "100vh"
|
||||
viewport.style.pointerEvents = "none"
|
||||
viewport.style.zIndex = "9999"
|
||||
|
||||
// 克隆当前视口内容
|
||||
const bodyClone = document.body.cloneNode(true) as HTMLElement
|
||||
viewport.appendChild(bodyClone)
|
||||
document.body.appendChild(viewport)
|
||||
|
||||
const result = await this.captureElement(viewport, {
|
||||
...options,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
})
|
||||
|
||||
document.body.removeChild(viewport)
|
||||
return result
|
||||
} catch (error) {
|
||||
throw new Error(`视口截图失败: ${error}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const enhancedScreenshotService = new EnhancedScreenshotService()
|
||||
export type { ScreenshotResult, ScreenshotOptions }
|
||||
|
||||
@@ -1,182 +1,123 @@
|
||||
/**
|
||||
* 页面注册表
|
||||
* 包含应用程序中所有需要文档化的页面
|
||||
*/
|
||||
|
||||
interface AppPage {
|
||||
interface PageInfo {
|
||||
path: string
|
||||
title: string
|
||||
description: string
|
||||
name: string
|
||||
description?: string
|
||||
category?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有需要文档化的页面
|
||||
*/
|
||||
export function getAllPages(): AppPage[] {
|
||||
return [
|
||||
// 主要页面
|
||||
class PageRegistry {
|
||||
private pages: PageInfo[] = [
|
||||
{
|
||||
path: "/",
|
||||
title: "系统概览",
|
||||
description:
|
||||
"用户数据资产中台的主页面，展示系统整体运行状况、关键指标和快速入口。提供数据概览、用户增长趋势、价值分布等核心信息的可视化展示。",
|
||||
name: "数据概览",
|
||||
description: "平台整体数据分析",
|
||||
category: "核心功能",
|
||||
},
|
||||
|
||||
// 用户管理
|
||||
{
|
||||
path: "/user-portrait",
|
||||
title: "用户画像",
|
||||
description:
|
||||
"全面展示用户的基本信息、行为特征、兴趣偏好和价值评估。通过多维度数据分析，帮助深入了解用户特征，支持精准营销和个性化服务。",
|
||||
},
|
||||
{
|
||||
path: "/user-pool",
|
||||
title: "用户池",
|
||||
description:
|
||||
"集中管理所有用户数据，提供高级筛选、分组和批量操作功能。支持基于多种条件的用户查询和导出，便于进行用户分析和营销活动。",
|
||||
},
|
||||
{
|
||||
path: "/user-value",
|
||||
title: "用户价值评估",
|
||||
description:
|
||||
"基于RFM模型和AI算法评估用户价值，识别高价值用户群体。提供用户生命周期价值预测和流失风险评估，支持制定差异化运营策略。",
|
||||
},
|
||||
|
||||
// 数据管理
|
||||
{
|
||||
path: "/data-platform",
|
||||
title: "数据中台",
|
||||
description:
|
||||
"数据管理和分析的核心平台，提供数据集成、质量监控、关联分析等功能。支持多数据源接入，实现数据的统一管理和价值挖掘。",
|
||||
name: "数据中台",
|
||||
description: "多源数据整合中心",
|
||||
category: "核心功能",
|
||||
},
|
||||
{
|
||||
path: "/data-integration",
|
||||
title: "数据集成",
|
||||
description:
|
||||
"配置和管理外部数据源的接入，支持API、数据库、文件等多种数据源类型。提供数据映射、转换和同步功能，确保数据的准确性和实时性。",
|
||||
path: "/user-discovery",
|
||||
name: "用户发现",
|
||||
description: "用户行为洞察分析",
|
||||
category: "用户分析",
|
||||
},
|
||||
{
|
||||
path: "/database-structure",
|
||||
title: "数据库结构",
|
||||
description:
|
||||
"可视化展示系统数据库的表结构、字段关系和索引信息。帮助开发人员和数据分析师理解数据模型，优化查询性能。",
|
||||
path: "/user-discovery/behavior",
|
||||
name: "行为分析",
|
||||
description: "用户行为模式分析",
|
||||
category: "用户分析",
|
||||
},
|
||||
{
|
||||
path: "/data-dictionary",
|
||||
title: "数据字典",
|
||||
description:
|
||||
"提供系统中所有数据字段的详细定义、类型、取值范围和业务含义说明。作为数据标准化的参考文档，确保数据使用的一致性。",
|
||||
},
|
||||
|
||||
// 标签系统
|
||||
{
|
||||
path: "/tag-management",
|
||||
title: "标签管理",
|
||||
description:
|
||||
"创建和管理用户标签体系，支持手动标签和自动标签。提供标签分类、层级管理和标签组合功能，构建完整的用户标签画像。",
|
||||
path: "/user-discovery/segmentation",
|
||||
name: "用户分群",
|
||||
description: "智能用户分群",
|
||||
category: "用户分析",
|
||||
},
|
||||
{
|
||||
path: "/tag-rules",
|
||||
title: "标签规则",
|
||||
description:
|
||||
"设置自动标签生成规则，基于用户行为和属性自动打标。支持复杂的条件组合和定时执行，提高标签覆盖率和准确性。",
|
||||
path: "/user-valuation",
|
||||
name: "用户估值",
|
||||
description: "用户价值评估模型",
|
||||
category: "价值分析",
|
||||
},
|
||||
{
|
||||
path: "/tag-tasks",
|
||||
title: "标签任务",
|
||||
description: "管理批量标签处理任务，监控任务执行状态和结果。支持定时任务和手动触发，提供任务日志和错误处理机制。",
|
||||
path: "/user-valuation/model",
|
||||
name: "估值模型",
|
||||
description: "RFM价值评估",
|
||||
category: "价值分析",
|
||||
},
|
||||
|
||||
// 营销工具
|
||||
{
|
||||
path: "/scenarios",
|
||||
title: "营销场景",
|
||||
description: "管理各类营销场景和活动，包括拉新、促活、留存等。提供场景模板和效果分析，支持快速复制成功经验。",
|
||||
path: "/user-valuation/upgrade-paths",
|
||||
name: "升级路径",
|
||||
description: "用户价值提升策略",
|
||||
category: "价值分析",
|
||||
},
|
||||
{
|
||||
path: "/ai-analysis",
|
||||
name: "AI分析",
|
||||
description: "智能数据洞察",
|
||||
category: "AI功能",
|
||||
},
|
||||
{
|
||||
path: "/ai-analysis/trends",
|
||||
name: "趋势识别",
|
||||
description: "AI趋势预测",
|
||||
category: "AI功能",
|
||||
},
|
||||
{
|
||||
path: "/ai-analysis/anomaly",
|
||||
name: "异常检测",
|
||||
description: "智能异常监控",
|
||||
category: "AI功能",
|
||||
},
|
||||
{
|
||||
path: "/devices",
|
||||
name: "设备管理",
|
||||
description: "设备状态监控",
|
||||
category: "系统管理",
|
||||
},
|
||||
{
|
||||
path: "/traffic-pool",
|
||||
title: "流量池",
|
||||
description:
|
||||
"管理和分配营销流量资源，监控流量使用情况和转化效果。支持流量预算管理和ROI分析，优化营销投入产出比。",
|
||||
name: "流量池",
|
||||
description: "流量数据管理",
|
||||
category: "系统管理",
|
||||
},
|
||||
{
|
||||
path: "/conversion",
|
||||
title: "转化分析",
|
||||
description: "分析用户转化漏斗，识别转化瓶颈和优化机会。提供多维度转化率对比和归因分析，指导营销策略优化。",
|
||||
},
|
||||
|
||||
// 设备管理
|
||||
{
|
||||
path: "/devices",
|
||||
title: "设备管理",
|
||||
description:
|
||||
"管理接入系统的所有设备，监控设备状态和性能。支持设备分组、远程控制和批量操作，确保营销活动的正常执行。",
|
||||
},
|
||||
{
|
||||
path: "/wechat-accounts",
|
||||
title: "微信账号",
|
||||
description: "管理微信营销账号，包括个人号和公众号。提供账号状态监控、好友管理和消息发送功能，支持微信私域运营。",
|
||||
},
|
||||
|
||||
// 内容管理
|
||||
{
|
||||
path: "/content",
|
||||
title: "内容库",
|
||||
description: "集中管理营销内容素材，包括文案、图片、视频等。支持内容分类、标签和版本管理，提高内容复用效率。",
|
||||
},
|
||||
|
||||
// 工作空间
|
||||
{
|
||||
path: "/workspace",
|
||||
title: "工作空间",
|
||||
description: "个人工作台，集成常用功能和快捷操作。提供任务管理、数据看板和协作工具，提升工作效率。",
|
||||
},
|
||||
|
||||
// AI功能
|
||||
{
|
||||
path: "/ai-assistant",
|
||||
title: "AI智能助手",
|
||||
description:
|
||||
"基于人工智能的智能分析和决策支持系统。提供数据洞察、趋势预测和策略建议，辅助制定数据驱动的业务决策。",
|
||||
},
|
||||
|
||||
// API接口
|
||||
{
|
||||
path: "/api-interface",
|
||||
title: "API接口",
|
||||
description: "系统对外API接口文档和测试工具。提供接口说明、参数定义和调用示例，支持第三方系统集成。",
|
||||
path: "/documentation",
|
||||
name: "文档生成",
|
||||
description: "自动文档生成",
|
||||
category: "工具",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路径获取页面信息
|
||||
*/
|
||||
export function getPageByPath(path: string): AppPage | null {
|
||||
const pages = getAllPages()
|
||||
return pages.find((page) => page.path === path) || null
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取页面分类
|
||||
*/
|
||||
export function getPageCategories(): Record<string, AppPage[]> {
|
||||
const pages = getAllPages()
|
||||
const categories: Record<string, AppPage[]> = {
|
||||
系统概览: pages.filter((p) => p.path === "/"),
|
||||
用户管理: pages.filter((p) => p.path.includes("user") || p.path.includes("portrait")),
|
||||
数据管理: pages.filter((p) => p.path.includes("data") || p.path.includes("database")),
|
||||
标签系统: pages.filter((p) => p.path.includes("tag")),
|
||||
营销工具: pages.filter(
|
||||
(p) =>
|
||||
p.path.includes("scenario") ||
|
||||
p.path.includes("traffic") ||
|
||||
p.path.includes("conversion") ||
|
||||
p.path.includes("content"),
|
||||
),
|
||||
设备管理: pages.filter((p) => p.path.includes("device") || p.path.includes("wechat")),
|
||||
其他功能: pages.filter((p) => p.path.includes("workspace") || p.path.includes("ai") || p.path.includes("api")),
|
||||
getAllPages(): PageInfo[] {
|
||||
return this.pages
|
||||
}
|
||||
|
||||
return categories
|
||||
getPagesByCategory(category: string): PageInfo[] {
|
||||
return this.pages.filter((page) => page.category === category)
|
||||
}
|
||||
|
||||
getPageByPath(path: string): PageInfo | undefined {
|
||||
return this.pages.find((page) => page.path === path)
|
||||
}
|
||||
|
||||
addPage(page: PageInfo): void {
|
||||
this.pages.push(page)
|
||||
}
|
||||
|
||||
removePage(path: string): void {
|
||||
this.pages = this.pages.filter((page) => page.path !== path)
|
||||
}
|
||||
|
||||
getCategories(): string[] {
|
||||
const categories = new Set(this.pages.map((page) => page.category).filter(Boolean))
|
||||
return Array.from(categories) as string[]
|
||||
}
|
||||
}
|
||||
|
||||
export const pageRegistry = new PageRegistry()
|
||||
export type { PageInfo }
|
||||
|
||||
@@ -3,6 +3,148 @@
|
||||
* 结合多种技术方案确保能够成功捕获页面截图
|
||||
*/
|
||||
|
||||
interface ScreenshotResult {
|
||||
success: boolean
|
||||
dataUrl?: string
|
||||
error?: string
|
||||
method?: string
|
||||
}
|
||||
|
||||
interface ScreenshotOptions {
|
||||
format?: "png" | "jpeg" | "webp"
|
||||
quality?: number
|
||||
scale?: number
|
||||
width?: number
|
||||
height?: number
|
||||
backgroundColor?: string
|
||||
timeout?: number
|
||||
}
|
||||
|
||||
class ScreenshotService {
|
||||
async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 方法1: 使用 html2canvas
|
||||
if (typeof window !== "undefined" && window.html2canvas) {
|
||||
const canvas = await window.html2canvas(document.body, {
|
||||
width: options.width || window.innerWidth,
|
||||
height: options.height || window.innerHeight,
|
||||
scale: options.scale || 1,
|
||||
backgroundColor: options.backgroundColor || "#ffffff",
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
})
|
||||
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "html2canvas",
|
||||
}
|
||||
}
|
||||
|
||||
// 方法2: 使用 dom-to-image
|
||||
if (typeof window !== "undefined" && window.domtoimage) {
|
||||
const dataUrl = await window.domtoimage.toPng(document.body, {
|
||||
width: options.width || window.innerWidth,
|
||||
height: options.height || window.innerHeight,
|
||||
style: {
|
||||
transform: `scale(${options.scale || 1})`,
|
||||
transformOrigin: "top left",
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "dom-to-image",
|
||||
}
|
||||
}
|
||||
|
||||
// 方法3: 使用 Canvas API (基础实现)
|
||||
const canvas = document.createElement("canvas")
|
||||
canvas.width = options.width || window.innerWidth
|
||||
canvas.height = options.height || window.innerHeight
|
||||
const ctx = canvas.getContext("2d")
|
||||
|
||||
if (ctx) {
|
||||
ctx.fillStyle = options.backgroundColor || "#ffffff"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 简单的文本渲染作为占位符
|
||||
ctx.fillStyle = "#333333"
|
||||
ctx.font = "16px Arial"
|
||||
ctx.fillText("页面截图占位符", 50, 50)
|
||||
ctx.fillText(`页面: ${window.location.pathname}`, 50, 80)
|
||||
ctx.fillText(`时间: ${new Date().toLocaleString()}`, 50, 110)
|
||||
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "canvas-fallback",
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error("无法创建截图")
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : "未知错误",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
|
||||
try {
|
||||
// 使用 html2canvas 截取特定元素
|
||||
if (typeof window !== "undefined" && window.html2canvas) {
|
||||
const canvas = await window.html2canvas(element, {
|
||||
width: options.width || element.offsetWidth,
|
||||
height: options.height || element.offsetHeight,
|
||||
scale: options.scale || 1,
|
||||
backgroundColor: options.backgroundColor || "#ffffff",
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
})
|
||||
|
||||
const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "html2canvas-element",
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 dom-to-image 截取特定元素
|
||||
if (typeof window !== "undefined" && window.domtoimage) {
|
||||
const dataUrl = await window.domtoimage.toPng(element, {
|
||||
width: options.width || element.offsetWidth,
|
||||
height: options.height || element.offsetHeight,
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataUrl,
|
||||
method: "dom-to-image-element",
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error("无法截取元素")
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : "未知错误",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const screenshotService = new ScreenshotService()
|
||||
export type { ScreenshotResult, ScreenshotOptions }
|
||||
|
||||
// 动态导入所需库
|
||||
let htmlToImageModule: any = null
|
||||
let domToImageModule: any = null
|
||||
@@ -90,12 +232,12 @@ export async function captureScreenshot(
|
||||
try {
|
||||
console.log("使用html-to-image捕获截图...")
|
||||
const dataUrl = await libraries.htmlToImage.toPng(element, {
|
||||
quality: 0.95,
|
||||
quality: options.quality || 0.95,
|
||||
cacheBust: true,
|
||||
pixelRatio: 2,
|
||||
pixelRatio: options.scale || 2,
|
||||
skipAutoScale: true,
|
||||
style: {
|
||||
"background-color": "#ffffff",
|
||||
"background-color": options.backgroundColor || "#ffffff",
|
||||
},
|
||||
})
|
||||
if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
|
||||
@@ -112,9 +254,9 @@ export async function captureScreenshot(
|
||||
try {
|
||||
console.log("使用dom-to-image捕获截图...")
|
||||
const dataUrl = await libraries.domToImage.toPng(element, {
|
||||
quality: 0.95,
|
||||
bgcolor: "#ffffff",
|
||||
scale: 2,
|
||||
quality: options.quality || 0.95,
|
||||
bgcolor: options.backgroundColor || "#ffffff",
|
||||
scale: options.scale || 2,
|
||||
})
|
||||
if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
|
||||
console.log("dom-to-image捕获成功!")
|
||||
@@ -257,7 +399,7 @@ async function captureWithPostMessage(iframe: HTMLIFrameElement): Promise<string
|
||||
const timeout = setTimeout(() => {
|
||||
window.removeEventListener("message", messageHandler)
|
||||
reject(new Error("postMessage截图超时"))
|
||||
}, 5000)
|
||||
}, options.timeout || 5000)
|
||||
|
||||
// 消息处理函数
|
||||
function messageHandler(event: MessageEvent) {
|
||||
@@ -451,12 +593,12 @@ export function injectScreenshotScript(window: Window): void {
|
||||
const canvas = await html2canvas(document.documentElement, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
scale: 2,
|
||||
backgroundColor: '#ffffff'
|
||||
scale: ${options.scale || 2},
|
||||
backgroundColor: '${options.backgroundColor || "#ffffff"}'
|
||||
});
|
||||
|
||||
// 发送截图数据
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
const dataUrl = canvas.toDataURL('image/${options.format || "png"}', ${options.quality || 0.9});
|
||||
window.parent.postMessage({
|
||||
type: 'screenshot',
|
||||
dataUrl: dataUrl
|
||||
|
||||
Reference in New Issue
Block a user