Currently, I am diving into learning Cytoscape.js. After successfully creating an HTML file with a basic graph, I attempted to export the graph to an image using the following code:
var png64 = cy.png();
// Inserting the png data in an img tag
document.querySelector('#png-eg').setAttribute('src', png64);)
This resulted in an error:
Uncaught TypeError: document.querySelector(...) is null
<anonymous> debugger eval code:1
debugger eval code:1:10
I came across a related post about "Uncaught TypeError: Cannot read property 'value' of null" on Stack Overflow, but the explanation was a bit confusing. It seems like the issue might be due to the absence of an element declared with the id #png-eg. When I tried substituting it with other elements like cy (to display the graph), a, b, ab (representing nodes and edges), only cy did not throw an error. However, I still couldn't figure out where the image was located.
I even attempted adding this element
<img id="png-eg" src="">cy.png() from the script and enter it directly in the console, a different error occurs: Uncaught DOMException: String contains an invalid characterUpon seeing the line window.cy in the example, I decided to execute it in the console. The result was: Object { _private: {…} }