PNG with watermark
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container { height: 300px; }
</style>
</head>
<body>
<div id="graph-container"></div>
<hr />
Image preview:<br />
<script>
'use strict';
function randomGraph(N, E) {
var g = {nodes:[], edges:[]};
for (var i = 0; i < N; i++) {
g.nodes.push({
id: 'n' + i,
attributes: {
x: Math.random() * 100,
y: Math.random() * 100,
text: 'Node ' + i
}
});
}
for (var i = 0; i < E; i++) {
g.edges.push({
id: 'e' + i,
source: 'n' + (Math.random() * N | 0),
target: 'n' + (Math.random() * N | 0),
attributes: {
text: 'Edge ' + i
}
});
}
return g;
}
var g = randomGraph(50, 50);
var ogma = new Ogma({
graph: g,
container: 'graph-container'
});
ogma.export.png({
download: false,
textWatermark: {
content: 'CLASSIFIED',
repeat: true,
angle: 45,
alpha: 0.2,
space: 50
},
imageWatermark: {
content: 'img/MI6.png'
}
}).then(function(dataURL) {
if (dataURL) {
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
}
});
</script>
</body>
</html>