OG
JS
Docs
Demos
Examples
Image export lab
Download the full viewport, crop a report to selected entities, or add a classification watermark.
SVG
PNG
PDF
Selection PNG
Watermarked PDF
Download generated file ↓
// Choose full, selected, or watermarked export intent against the live graph. // OGJS owns viewport scaling, crop bounds, vector/raster composition, and file encoding; // applications do not read the WebGL canvas or reconstruct screen coordinates. import { Ogjs } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); og.setGraph({ nodes: [ { id: 'center', x: 0, y: 0, size: 18, color: '#2563eb', label: 'Case' }, { id: 'account', x: -180, y: 105, size: 11, color: '#7c3aed', label: 'Account' }, { id: 'device', x: 180, y: 105, size: 11, color: '#059669', label: 'Device' }, { id: 'merchant', x: 180, y: -105, size: 11, color: '#ea580c', label: 'Merchant' }, { id: 'location', x: -180, y: -105, size: 11, color: '#dc2626', label: 'Location' }, ], edges: [ { source: 'center', target: 'account' }, { source: 'center', target: 'device' }, { source: 'center', target: 'merchant' }, { source: 'center', target: 'location' }, ] }); // Retained framing keeps this intent through resize without application observers or frame loops. og.camera.fit({ target: 'all', avoid: document.querySelector('.workflow-panel'), paddingPx: 24, maxOccupancy: .52, retain: true, }); const download = document.querySelector('#image-download'); const status = document.querySelector('#image-export-status'); let objectUrl; async function generate(format, startDownload = true) { // Each branch supplies export intent—vector, full raster, selected crop, or watermark. OGJS // owns bounds, layer composition, scaling, and encoding for the requested artifact. let blob, filename; if (format === 'svg') { blob = new Blob([og.export.svg()], { type: 'image/svg+xml' }); filename = 'network-view.svg'; } else if (format === 'png') { blob = await og.export.png(); filename = 'network-view.png'; } else if (format === 'selection-png') { og.clearSelection(); for (const id of ['center', 'account', 'device']) og.setSelected(id, true); blob = await og.export.png({ crop: 'selection', padding: 28 }); filename = 'selected-entities.png'; } else if (format === 'watermarked-pdf') { blob = await og.export.pdf({ watermark: { text: 'INTERNAL REVIEW', position: 'bottom-right', opacity: 0.68 }, }); filename = 'network-review.pdf'; } else { blob = await og.export.pdf(); filename = 'network-view.pdf'; } // Delivery remains application-owned. Revoke the old URL before replacing the download target // so completed exports do not accumulate browser-held blobs. if (objectUrl) URL.revokeObjectURL(objectUrl); objectUrl = URL.createObjectURL(blob); download.href = objectUrl; download.download = filename; download.classList.add('ready'); status.textContent = `${format.replace('-', ' ').toUpperCase()} · ${blob.size} bytes · ${ format === 'selection-png' ? '3 selected entities' : 'current viewport' }`; document.querySelectorAll('[data-image-export]').forEach((button) => button.setAttribute('aria-pressed', String(button.dataset.imageExport === format))); if (startDownload) download.click(); } document.querySelectorAll('[data-image-export]').forEach((button) => button.addEventListener('click', () => generate(button.dataset.imageExport))); generate('svg', false);