Pouzor
7e08a85f73
Clicking Export PNG now opens a modal with three quality presets: - Standard (1× pixel ratio) — small file - High (2×, default) — recommended for sharing - Ultra (4×) — print quality Adds ExportModal component, updates exportToPng() to accept a quality param, and wires the modal into App.tsx replacing the direct export call.
26 lines
1.0 KiB
TypeScript
26 lines
1.0 KiB
TypeScript
import { toPng } from 'html-to-image'
|
||
|
||
export type ExportQuality = 'standard' | 'high' | 'ultra'
|
||
|
||
export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
|
||
{ value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
|
||
{ value: 'high', label: 'High', pixelRatio: 2, hint: '2× — recommended' },
|
||
{ value: 'ultra', label: 'Ultra', pixelRatio: 4, hint: '4× — print quality, large file' },
|
||
]
|
||
|
||
export async function exportToPng(element: HTMLElement, quality: ExportQuality = 'high'): Promise<void> {
|
||
const option = EXPORT_QUALITY_OPTIONS.find((o) => o.value === quality) ?? EXPORT_QUALITY_OPTIONS[1]
|
||
const dataUrl = await toPng(element, {
|
||
backgroundColor: '#0d1117',
|
||
pixelRatio: option.pixelRatio,
|
||
style: {
|
||
'--xy-controls-display': 'none',
|
||
} as Partial<CSSStyleDeclaration>,
|
||
})
|
||
|
||
const link = document.createElement('a')
|
||
link.download = 'homelable-canvas.png'
|
||
link.href = dataUrl
|
||
link.click()
|
||
}
|