Relation Graph

功能概述

此示例演示将图可视化为 Base64 编码的图像字符串生成。与基本下载示例不同，此版本捕获图像并在 UI 中显示它以及 Base64 字符串表示。当您需要在应用程序内显示生成的图像、将其存储在数据库中或通过 API 传输它时，这特别有用。

核心特性实现

Base64 转换

主要区别是将图像 blob 转换为 Base64：

const generateImageBase64 = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: myImageBackgroundColor
    });
    await graphInstance.restoreAfterImageGeneration();
    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

blobToBase64 实用程序将二进制图像数据转换为 Base64 字符串。

Base64 字符串的状态管理

React 状态存储用于显示的 Base64 字符串：

const [base64String, setBase64String] = useState<string | null>(null);

这允许在生成后立即显示图像。

图像预览显示

生成的图像显示在预览容器中：

{base64String && (
    <div className="py-1">
        Screenshot:
        <div className="h-60 flex items-center justify-center overflow-hidden bg-gray-100">
            <img className="max-w-full max-h-full object-contain" src={base64String} alt="Graph Screenshot" />
        </div>
        base64:
        <div className="overflow-auto break-words h-36">{base64String}</div>
    </div>
)}

渲染的图像和原始 Base64 字符串都显示出来。

可配置的背景颜色

用户可以选择导出图像的背景颜色：

<input
    type="color"
    value={myImageBackgroundColor}
    onChange={(e) => setMyImageBackgroundColor(e.target.value)}
    className="w-8 h-8 cursor-pointer border rounded"
/>

这为不同的用例和设计要求提供了灵活性。

创意使用场景

数据库存储

将图快照作为 Base64 字符串存储在数据库中。这允许您保存可视化状态、创建历史记录或为图配置实施版本控制。

API 集成

通过 REST 或 GraphQL API 发送图可视化。Base64 格式可以轻松嵌入到 JSON 响应中并由客户端应用程序使用。

图像库和缩略图

创建图可视化的画廊。每个导出都可以存储并显示为缩略图，允许用户浏览保存的状态。

嵌入图像的报告生成

生成包含图可视化的报告（PDF、HTML 等）。Base64 格式可以直接嵌入到 HTML 中或为其他格式转换。

比较和差异工具

构建比较不同图状态的工具。并排的 Base64 图像使可视化变更和差异变得容易。

预览和确认流程

在用户提交之前向他们显示将要导出的内容的预览。应用程序内显示允许在下载或存储之前进行验证。

协作注释

允许用户向图快照添加注释。Base64 图像可以显示在注释工具中，用户在其中标记特定区域。

分析和监控

为监控仪表板捕获定期快照。存储图像以创建系统状态的时间线或视觉分析。

测试和质量保证

通过生成 Base64 图像并将它们与预期结果进行比较来自动化视觉回归测试。这有助于捕获 UI 更改或错误。

社交媒体和共享

在接受 Base64 图像的平台上共享图可视化。用户可以生成并立即共享而无需下载文件。

图谱内容生成Base64数据