Generate Graph Image as Base64 String for Display and Storage

Functional Overview

This example demonstrates generating a graph visualization as a Base64-encoded image string. Unlike the basic download example, this version captures the image and displays it in the UI alongside the Base64 string representation. This is particularly useful when you need to display the generated image within the application, store it in databases, or transmit it via APIs.

Implementation of Key Features

Base64 Conversion

The key difference is converting the image blob to 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);
    }
};

The blobToBase64 utility converts the binary image data to a Base64 string.

State Management for Base64 String

React state stores the Base64 string for display:

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

This allows the image to be displayed immediately after generation.

Image Preview Display

The generated image is shown in a preview container:

{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>
)}

Both the rendered image and the raw Base64 string are displayed.

Configurable Background Color

Users can choose the background color for the exported image:

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

This provides flexibility for different use cases and design requirements.

Creative Use Cases

Database Storage

Store graph snapshots in databases as Base64 strings. This allows you to save visualization states, create historical records, or implement version control for graph configurations.

API Integration

Send graph visualizations via REST or GraphQL APIs. The Base64 format can be easily embedded in JSON responses and consumed by client applications.

Image Gallery and Thumbnails

Create galleries of graph visualizations. Each export can be stored and displayed as a thumbnail, allowing users to browse through saved states.

Report Generation with Embedded Images

Generate reports (PDF, HTML, etc.) that include graph visualizations. The Base64 format can be directly embedded in HTML or converted for other formats.

Comparison and Diff Tools

Build tools that compare different graph states. Side-by-side Base64 images make it easy to visualize changes and differences.

Preview and Confirmation Flows

Show users a preview of what will be exported before they commit. The in-app display allows for verification before downloading or storing.

Collaborative Annotation

Allow users to add annotations to graph snapshots. The Base64 image can be displayed in an annotation tool where users mark up specific areas.

Analytics and Monitoring

Capture periodic snapshots for monitoring dashboards. Store the images to create timelines of system states or visual analytics.

Testing and Quality Assurance

Automate visual regression testing by generating Base64 images and comparing them against expected results. This helps catch UI changes or bugs.

Social Media and Sharing

Enable sharing of graph visualizations on platforms that accept Base64 images. Users can generate and immediately share without downloading files.