0
270
Views¿Cómo exportar un gráfico de Cytoscape.js a una imagen?
Estoy aprendiendo Cytoscape.js. Hago con éxito un archivo HTML que contiene este gráfico básico . Intento exportar el gráfico a la imagen usando:
var png64 = cy.png(); // put the png data in an img tag document.querySelector('#png-eg').setAttribute('src', png64);)y obtener el error
Uncaught TypeError: document.querySelector(...) is null <anonymous> debugger eval code:1 debugger eval code:1:10 Existe esta publicación TypeError no detectado: no se puede leer la propiedad 'valor' de nulo , pero no lo entiendo. Sospecho que es simplemente que no hay un elemento declarado con id #png-eg . Pero cuando reemplazo eso con otros elementos declarados con id, que son cy (para mostrar el gráfico), a , b , ab (los nodos y el borde), el único elemento que no genera el error es cy . Pero incluso entonces no sé dónde se ubica la imagen.
Intenté agregar este elemento <img id="png-eg" src=""> en el cuerpo, pero aún no funciona. El error nulo todavía ocurre. (Pero si no cy.png() en el script pero escribo en la consola, el error es Uncaught DOMException: String contains an invalid character ).
En el ejemplo, hay una línea window.cy , así que intento ejecutarla en la consola. Obtengo Object { _private: {…} }
1 answers
Answer question0
Si tiene lo siguiente (asegúrese de que el DOM esté cargado antes de intentar consultar elementos):
HTML:
<div id="cy"></div> <button>Render PNG</button>CSS:
#cy { width: 320px; height: 320px; }JS:
const cy = cytoscape({ container: document.getElementById('cy'), // and the rest of the example you already have }) const btn = document.querySelector('button'); btn.addEventListener('click', () => { const base64URI = cy.png(); const img = document.createElement('img'); img.src = base64URI; document.body.appendChild(img); });Esto creará un nuevo elemento de imagen y hará que su fuente sea igual a la representación PNG base64 exportada por Cytoscape. Luego, el elemento se agregará al DOM y podrá ver la instantánea del gráfico representado dentro de la etiqueta de la imagen.
Puedes ver el ejemplo completo en StackBlitz .