Skip to content Skip to sidebar Skip to footer
Home / Cytoscape.js / Javascript

Export Cytoscape Graph As Png Image: How To Put Png Tag On Cytoscape Graph

Post a Comment
I an novice in js and cytoscape. I want to display cytoscape graph in server with an save button for saving it as png. I checked cytoscape documentation but did not understand how

Solution 1:

Your code simply doesn't contain the required img tag, so just add it to your html or add it with js/jquery:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
      { data: { id: 'b' } },
      { data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
      { data: { id: 'd' }, position: { x: 215, y: 175 } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
    ],
    edges: [
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } }

    ]
  },

  layout: {
    name: 'preset',
    padding: 5
  }
});
cy.ready(function () {
  //if you want to create the img tag afterwards://$('#right').prepend("<img id='png-eg'>");var png64 = cy.png();
  // put the png data in an img tag
  $('#png-eg').attr('src', png64);
});
$("#clickMe").click(function () {
    var png64 = cy.png();
    // put the png data in an img tag
    $('#png-eg').attr('src', png64);
});
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}
#png-eg {
    border: 1px solid #ddd;
    min-width: 3em;
    min-height: 3em;
    width: 25%;
    float: right;
}
<!DOCTYPE html><!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. --><html><head><linkhref="style.css"rel="stylesheet" /><metacharset=utf-8 /><metaname="viewport"content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"><title>Compound nodes</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script><scriptsrc="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script></head><body><divid="wrapper"><divid="cy"></div><divid="right"><buttonid="clickMe"style="float: right;">Click me</button><imgid="png-eg"></div></div></body></html>

You may like these posts

Post a Comment for "Export Cytoscape Graph As Png Image: How To Put Png Tag On Cytoscape Graph"