export node-html to jpeg

[aminPolimi]

I am going to export my network to image(jpeg). How can I export cytoscape-node-html-label by cy.jpeg? Thanks

[morficus]

I'm running in to this same issue so I started to dig in a bit. The HTML-labels are not actually part of the <canvas> element created by cytoscape, but are <div>'s that are positioned absolutely. Cytoscape is using the canvas.toDataURL() API to generate the image... hence why the HTML-labels are not part of the image :-(

[kaluginserg]

You can try use html2canvas. This library can create jpg from html content.

[jeppebm]

Would also love this feature, but I doubt that it's possible using the current approach. Using html2canvas seems to be troublesome since the elements are absolutely positioned, which is not supported by html2canvas.

[aledwassell]

The only way I have found to get html2canvas working it to use html2canvas on the entire canvas and it does export the HTML node labels, the only thing is it obviously wont allow any native cytoscape.png/jpeg options.

[paulks-software]

the only way i could get a usable result is when scaling div artificially cy is cytoscape

cy.center(); cy.fit(); const div = document.querySelector('.scaledDiv'); div.style.transform = 'scale(2)';

then something :

// Use html2canvas to capture the screenshot html2canvas(div).then(function(canvas) {

// Convert the canvas to a data URL
const screenshotDataURL = canvas.toDataURL('image/png');

// Create a download link for the screenshot
const a = document.createElement('a');
a.href = screenshotDataURL;
a.download = 'screenshot.png'; // Specify the filename for the image
a.style.display = 'none';

// Add the download link to the document and trigger the click event
document.body.appendChild(a);
a.click();

// Clean up
document.body.removeChild(a);
div.style.transform = 'scale(1)';

});