新增分享
This commit is contained in:
maojindao55
@@ -448,8 +448,8 @@ const ChatUI = () => {
|
||||
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<ScrollArea className="h-full p-4">
|
||||
<div className="space-y-4" ref={chatAreaRef}>
|
||||
<ScrollArea className="h-full p-4" ref={chatAreaRef}>
|
||||
<div className="space-y-4">
|
||||
{messages.map((message) => (
|
||||
<div key={message.id}
|
||||
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import domtoimage from 'dom-to-image';
|
||||
import { Dialog, DialogContent, DialogClose } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Share2, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface SharePosterProps {
|
||||
isOpen: boolean;
|
||||
@@ -22,132 +23,148 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
||||
|
||||
const generatePoster = async () => {
|
||||
if (!chatAreaRef.current) return;
|
||||
|
||||
await document.fonts.ready;
|
||||
|
||||
try {
|
||||
// 克隆原始聊天区域以保持样式
|
||||
const clonedChat = chatAreaRef.current.cloneNode(true) as HTMLElement;
|
||||
|
||||
// 创建临时容器并设置与原始容器相同的样式
|
||||
const tempContainer = document.createElement('div');
|
||||
tempContainer.style.position = 'absolute';
|
||||
tempContainer.style.left = '-9999px';
|
||||
tempContainer.style.width = chatAreaRef.current.offsetWidth + 'px';
|
||||
document.body.appendChild(tempContainer);
|
||||
tempContainer.appendChild(clonedChat);
|
||||
const messageContainer = chatAreaRef.current.querySelector('.space-y-4');
|
||||
if (!messageContainer) return;
|
||||
|
||||
// 确保所有图片都已加载
|
||||
const images = Array.from(clonedChat.getElementsByTagName('img'));
|
||||
await Promise.all(images.map(img => {
|
||||
if (img.complete) return Promise.resolve();
|
||||
return new Promise((resolve) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = resolve;
|
||||
});
|
||||
}));
|
||||
// 预处理所有图片
|
||||
const preloadImages = async () => {
|
||||
const images = Array.from(messageContainer.getElementsByTagName('img'));
|
||||
await Promise.all(images.map(async (img) => {
|
||||
try {
|
||||
const response = await fetch(img.src, {
|
||||
mode: 'cors',
|
||||
credentials: 'omit'
|
||||
});
|
||||
const blob = await response.blob();
|
||||
const base64 = await new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result);
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
img.src = base64 as string;
|
||||
} catch (error) {
|
||||
console.error('图片预处理失败:', error);
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const canvas = await html2canvas(clonedChat, {
|
||||
backgroundColor: '#f3f4f6',
|
||||
scale: 2,
|
||||
useCORS: true, // 允许跨域图片
|
||||
logging: false,
|
||||
onclone: (document) => {
|
||||
// 确保所有样式都被正确应用
|
||||
const styles = Array.from(document.styleSheets);
|
||||
styles.forEach(styleSheet => {
|
||||
try {
|
||||
if (styleSheet.cssRules) {
|
||||
Array.from(styleSheet.cssRules).forEach(rule => {
|
||||
clonedChat.style.cssText += rule.cssText;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('无法访问样式表:', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
await preloadImages();
|
||||
|
||||
const originalScroll = chatAreaRef.current.scrollTop;
|
||||
chatAreaRef.current.scrollTop = 0;
|
||||
|
||||
const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
|
||||
const extraSpace = 20;
|
||||
const targetWidth = viewportWidth * 0.95 - (extraSpace * 2);
|
||||
|
||||
const currentWidth = messageContainer.getBoundingClientRect().width;
|
||||
const scale = targetWidth / currentWidth;
|
||||
|
||||
const currentHeight = messageContainer.scrollHeight;
|
||||
const adjustedHeight = currentHeight * scale;
|
||||
|
||||
const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
|
||||
bgcolor: '#f3f4f6',
|
||||
scale: 1, // 回到较安全的值
|
||||
width: targetWidth + (extraSpace * 2),
|
||||
height: adjustedHeight + (extraSpace * 2),
|
||||
style: {
|
||||
padding: `${extraSpace}px`,
|
||||
margin: '0',
|
||||
width: '110%',
|
||||
height: '110%',
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: 'top left',
|
||||
background: '#f3f4f6',
|
||||
boxSizing: 'border-box'
|
||||
},
|
||||
quality: 1.0
|
||||
});
|
||||
|
||||
// 清理临时元素
|
||||
document.body.removeChild(tempContainer);
|
||||
|
||||
setPosterImage(canvas.toDataURL('image/png'));
|
||||
|
||||
chatAreaRef.current.scrollTop = originalScroll;
|
||||
setPosterImage(dataUrl);
|
||||
} catch (error) {
|
||||
console.error('生成海报失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!posterImage) return;
|
||||
|
||||
try {
|
||||
const blob = await fetch(posterImage).then(r => r.blob());
|
||||
const filesArray = [
|
||||
new File([blob], 'chat-history.png', { type: 'image/png' })
|
||||
];
|
||||
|
||||
if (navigator.share && navigator.canShare({ files: filesArray })) {
|
||||
await navigator.share({
|
||||
files: filesArray,
|
||||
title: '聊天记录',
|
||||
});
|
||||
} else {
|
||||
throw new Error('不支持系统分享');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('分享失败:', error);
|
||||
alert('分享失败，请尝试保存图片');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
const handleDownload = async () => {
|
||||
if (!posterImage) return;
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = posterImage;
|
||||
a.download = 'chat-history.png';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
try {
|
||||
// 创建一个新的图片对象
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
|
||||
// 等待图片加载完成
|
||||
await new Promise((resolve, reject) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
img.src = posterImage;
|
||||
});
|
||||
|
||||
// 创建高分辨率canvas
|
||||
const scale = 2; // 将分辨率提高2倍
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = img.width * scale;
|
||||
canvas.height = img.height * scale;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
throw new Error('无法创建canvas上下文');
|
||||
}
|
||||
|
||||
// 设置更好的图像渲染质量
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
|
||||
// 按比例缩放绘制
|
||||
ctx.scale(scale, scale);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// 使用更高质量的PNG导出
|
||||
const pngUrl = canvas.toDataURL('image/png', 1.0);
|
||||
const a = document.createElement('a');
|
||||
a.href = pngUrl;
|
||||
a.download = 'chat-history.png';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('转换图片失败:', error);
|
||||
toast.error('保存图片失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-[90vw] max-h-[90vh] overflow-auto">
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
ref={posterRef}
|
||||
className="bg-white rounded-lg p-4 max-w-full"
|
||||
>
|
||||
{posterImage && (
|
||||
<DialogContent className="max-w-[95vw] w-full sm:max-w-[90vw] max-h-[90vh] flex flex-col p-0">
|
||||
{/* 图片容器 */}
|
||||
<div className="flex-1 overflow-auto p-1">
|
||||
{posterImage && (
|
||||
<div className="flex items-center justify-center min-h-full">
|
||||
<img
|
||||
src={posterImage}
|
||||
alt="聊天记录"
|
||||
className="w-full h-auto rounded-lg"
|
||||
alt="Share Poster"
|
||||
className="max-w-full w-auto h-auto"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
objectFit: 'contain'
|
||||
objectFit: 'contain',
|
||||
imageRendering: 'crisp-edges',
|
||||
WebkitFontSmoothing: 'antialiased'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4 mt-4">
|
||||
<Button
|
||||
onClick={handleShare}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
分享
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
variant="outline"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
保存图片
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 p-2 sm:p-4 border-t">
|
||||
<Button onClick={handleDownload}>
|
||||
保存聊天海报
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user