example of cy.png

David Tabernero

unread,

Sep 16, 2015, 2:06:57 AM9/16/15

to cytoscape-discuss

Hi,
colud you give me an example of using cy.png.
I have a graph and I would like to export to png file but I can't see any example
Thanks and sorry for my English!
I see these example but don't works:

<!DOCTYPE html>

<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

#click-me {
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
</style>
</head>
<body>
<a href="#" id="click-me">PNG Test</a>
<br />
<div id="cy"></div>
<script id="jsbin-javascript">
$('#cy').cytoscape({
style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
},

ready: function(){
    window.cy = this;

    // giddy up...

    cy.elements().unselectify();

    cy.on('tap', 'node', function(e){
      var node = e.cyTarget;
      var neighborhood = node.neighborhood().add(node);

      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });

    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });

    $("#click-me").click(function(e) {
      var pngData = cy.png();
      console.log("PNG export: " + pngData);
      cy.$("#j").position({ x: 100, y: 100});
    });
}
});

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

Max Franz

unread,

Sep 24, 2015, 1:28:32 PM9/24/15

to cytoscape-discuss

The documentation has a full, live example: http://js.cytoscape.org/#core/export/cy.png

David Tabernero

unread,

Sep 24, 2015, 1:54:11 PM9/24/15

to cytoscap...@googlegroups.com

Where?
I can't find it

--
You received this message because you are subscribed to a topic in the Google Groups "cytoscape-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cytoscape-discuss/gMhciRoZzug/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at http://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

Christian Lopes

unread,

Sep 24, 2015, 2:30:17 PM9/24/15

to cytoscape-discuss

Here's the text I copied from the docs page, in case you can't access it:

cy.png() 

Export the current graph view as a PNG image in Base64 representation.

cy.png( options )

options
The export options.
- bg
  The background colour of the image (transparent by default).
- full
  Whether to export the current viewport view (false, default) or the entire graph (true).
- scale
  This value specifies a positive number that scales the size of the resultant image.
- maxWidth
  Specifies the scale automatically in combination with maxHeight such that the resultant image is no wider than maxWidth.
- maxHeight
  Specifies the scale automatically in combination with maxWidth such that the resultant image is no taller than maxHeight.

Examples

var png64 = cy.png();

// put the png data in an img tag
$('#png-eg').attr('src', png64);

David Tabernero

unread,

Sep 24, 2015, 2:56:32 PM9/24/15

to cytoscap...@googlegroups.com

Sorry I'm newbie with these.
I must create a button or something like these and insert these code no?

Reply all

Reply to author

Forward