123 lines
4.6 KiB
TypeScript
123 lines
4.6 KiB
TypeScript
import { useCallback } from 'react';
|
|
import html2canvas from 'html2canvas';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
|
|
export function useScreenshot() {
|
|
const toast = useToast();
|
|
|
|
const takeScreenshot = useCallback(async (username: string = 'Explorer') => {
|
|
// 1. Find the container that includes both the Canvas and the HTML overlays (labels)
|
|
const element = document.getElementById('cosmo-scene-container');
|
|
if (!element) {
|
|
console.error('Scene container not found');
|
|
toast.error('无法找到截图区域');
|
|
return;
|
|
}
|
|
|
|
const toastId = toast.info('正在生成宇宙快照...', 0);
|
|
|
|
try {
|
|
// 2. Use html2canvas to capture the visual composite
|
|
// We use a slightly lower scale if DPR is too high to save memory/performance,
|
|
// but usually window.devicePixelRatio is fine (2 or 3).
|
|
const capturedCanvas = await html2canvas(element, {
|
|
backgroundColor: '#000000',
|
|
useCORS: true, // Allow loading cross-origin images (textures)
|
|
logging: false,
|
|
scale: window.devicePixelRatio,
|
|
allowTaint: true, // Needed if some textures are tainted (may block download if CORS fails)
|
|
ignoreElements: (_el) => false,
|
|
});
|
|
|
|
// 3. Create a fresh canvas for composition to ensure clean state
|
|
const width = capturedCanvas.width;
|
|
const height = capturedCanvas.height;
|
|
|
|
const finalCanvas = document.createElement('canvas');
|
|
finalCanvas.width = width;
|
|
finalCanvas.height = height;
|
|
const ctx = finalCanvas.getContext('2d');
|
|
|
|
if (!ctx) {
|
|
throw new Error('无法创建绘图上下文');
|
|
}
|
|
|
|
// Draw the captured scene
|
|
ctx.drawImage(capturedCanvas, 0, 0);
|
|
|
|
// 4. Add Overlay / Watermark
|
|
const now = new Date();
|
|
const dateStr = now.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
|
|
const timeStr = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
|
|
// Calculate dynamic font sizes based on image width (e.g., for 4k screens)
|
|
// Base logic: width 1920 -> size 32. Ratio ~ 0.016
|
|
const baseScale = width / 1920;
|
|
const titleSize = Math.max(24, Math.floor(32 * baseScale));
|
|
const subTitleSize = Math.max(12, Math.floor(16 * baseScale));
|
|
const dateSize = Math.max(18, Math.floor(24 * baseScale));
|
|
const timeSize = Math.max(14, Math.floor(18 * baseScale));
|
|
|
|
// Margins
|
|
const marginX = Math.max(20, Math.floor(40 * baseScale));
|
|
const marginY = Math.max(20, Math.floor(35 * baseScale));
|
|
const gradientHeight = Math.floor(200 * baseScale);
|
|
|
|
// Background gradient for text legibility
|
|
const gradient = ctx.createLinearGradient(0, height - gradientHeight, 0, height);
|
|
gradient.addColorStop(0, 'transparent');
|
|
gradient.addColorStop(1, 'rgba(0,0,0,0.9)');
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, height - gradientHeight, width, gradientHeight);
|
|
|
|
// Text Settings common
|
|
ctx.shadowColor = 'rgba(0,0,0,0.8)';
|
|
ctx.shadowBlur = 4;
|
|
ctx.textBaseline = 'bottom';
|
|
|
|
// --- Right Side: User & App ---
|
|
ctx.textAlign = 'right';
|
|
|
|
// Subtitle (Bottom)
|
|
ctx.font = `${subTitleSize}px sans-serif`;
|
|
ctx.fillStyle = '#aaaaaa';
|
|
ctx.fillText('DEEP SPACE EXPLORER', width - marginX, height - marginY);
|
|
|
|
// Nickname@Cosmo (Above Subtitle)
|
|
ctx.font = `bold ${titleSize}px sans-serif`;
|
|
ctx.fillStyle = '#ffffff';
|
|
// Move up by subTitle height + padding
|
|
ctx.fillText(`${username}@Cosmo`, width - marginX, height - marginY - subTitleSize - 10);
|
|
|
|
// --- Left Side: Date & Time ---
|
|
ctx.textAlign = 'left';
|
|
|
|
// Time (Bottom)
|
|
ctx.font = `${timeSize}px monospace`;
|
|
ctx.fillStyle = '#cccccc';
|
|
ctx.fillText(timeStr, marginX, height - marginY);
|
|
|
|
// Date (Above Time)
|
|
ctx.font = `bold ${dateSize}px monospace`;
|
|
ctx.fillStyle = '#44aaff';
|
|
ctx.fillText(dateStr, marginX, height - marginY - timeSize - 10);
|
|
|
|
// 5. Trigger Download
|
|
const dataUrl = finalCanvas.toDataURL('image/png');
|
|
const link = document.createElement('a');
|
|
link.download = `Cosmo_Snapshot_${now.toISOString().slice(0,19).replace(/[:T]/g, '-')}.png`;
|
|
link.href = dataUrl;
|
|
link.click();
|
|
|
|
toast.success('宇宙快照已保存');
|
|
|
|
} catch (err) {
|
|
console.error('Screenshot failed:', err);
|
|
toast.error('截图失败，请稍后重试');
|
|
} finally {
|
|
toast.removeToast(toastId);
|
|
}
|
|
}, [toast]);
|
|
|
|
return { takeScreenshot };
|
|
} |