[javascript] Cytoscape.js에서 그래프를 이미지로 내보내는 방법은 무엇인가요?

24 Nov 2023

javascript

이미지로 그래프를 내보내기 위해서는 Cytoscape.js의 cy.png() 메서드를 사용해야 합니다. 이 메서드는 현재 그래프를 PNG 이미지로 내보내는 기능을 제공합니다. 아래는 이 기능을 사용하는 간단한 예제 코드입니다.

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

  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],

  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  layout: {
    name: 'grid'
  }
});

// 이미지로 그래프 내보내기
cy.png({
  output: 'base64',
  bg: '#ffffff',
  full: true,
  scale: 1,
  maxHeight: 1000,
  maxWidth: 1000
}).then(function(dataUri){
  var img = document.createElement('img');
  img.src = dataUri;

  document.body.appendChild(img);
});

위의 코드에서는 Cytoscape.js를 사용하여 간단한 그래프를 생성하고, cy.png() 메서드를 호출하여 PNG 형식의 이미지로 내보냅니다. 이 때 output 옵션을 ‘base64’로 설정하면 이미지 데이터를 Base64로 반환하게 됩니다.

위 예제 코드의 실행 결과로 이미지를 포함한 웹 페이지가 생성되며, 그래프를 이미지로 내보내는 기능이 작동합니다.

Cytoscape.js에서는 다양한 내보내기 옵션을 제공하기도 합니다. 자세한 내용은 Cytoscape.js 문서를 참고하시기 바랍니다.