Appearance

  2. Examples

PNG with watermark ​

exportimage-export

This example shows how to add watermark to your exported PNG image. It uses the PNG export API and the textWatermark option.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

function randomColor() {
  return (
    '#' +
    Math.floor(Math.random() * 16777215)
      .toString(16)
      .padStart(6, '0')
  );
}

ogma.styles.addRule({
  nodeAttributes: {
    text: {
      content: n => 'Node ' + n.getId()
    },
    color: randomColor
  },
  edgeAttributes: {
    text: {
      content: e => 'Edge ' + e.getId()
    }
  }
});
const graph = await ogma.generate.random({ nodes: 20, edges: 20 });
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true, duration: 0 });
const dataURL = await ogma.export.png({
  download: false,
  textWatermark: {
    content: 'CLASSIFIED',
    repeat: true,
    angle: 45,
    alpha: 0.2,
    space: 50
  },
  imageWatermark: {
    content: 'img/MI6.png'
  }
});
if (dataURL) {
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);
}
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <hr />
    &darr;<br />
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container,
img {
  height: 300px;
}

body {
  text-align: center;
}