Image

Ogma can render images available via HTTP/S. Images may be in PNG, JPG, and SVG format. Images are controlled by the image attribute Images can also be used within node badges as well.

When using the WebGL renderer, images must either be retrieved from the same origin, or have CORS approval. When using the canvas renderer, images from any origin can be displayed, but PNG export will not include images without CORS approval. The global option imgCrossOrigin (set through ogma.setOptions()) controls the crossOrigin attribute of the images.

Open in a new window.

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

<script>
'use strict';

var SHAPES = ['circle', 'square', 'cross', 'diamond', 'star', 'equilateral'];

var IMG_URLS = [
  'img/img1.png',
  'img/img2.png',
  'img/img3.png',
  'img/img4.png',
  'flags/fr.svg' // SVG image
];

var ogma = new Ogma({
  container: 'graph-container',
  imgCrossOrigin: 'use-credentials' // 'anonymous'
});

// Define the Node style.
ogma.styles.addNodeRule({
  image: {
    url: function (n) { return IMG_URLS[n.getId() % IMG_URLS.length]; },
    scale: 1.3,
  },
  shape: function (n) { return SHAPES[n.getId() % SHAPES.length | 0]; },
});

ogma.generate.random({ nodes: 10, edges: 0 })
  .then(function (graph) {
    ogma.setGraph(graph);
    ogma.view.locateGraph();
  });

</script>
</body>
</html>