cytoscape.js导出图片png或jpg

cytoscape.js

Cytoscape.js是一个用JS编写的开源图库. 您可以使用Cytoscape.js进行图形分析和可视化展示.

Cytoscape.js允许您轻松显示操作丰富的交互式图形. 因为Cytoscape.js允许用户与图形交互, 并且允许客户端在用户事件中挂载钩子, 所以Cytoscape.js可以轻松集成到您的应用程序中, 特别是因为Cytoscape.js支持桌面浏览器, 如Chrome, 和移动浏览器, 如iPad. Cytoscape.js包括您期望开箱即用的所有手势, 包括捏合缩放, 框选择, 平移等等.

本文介绍通过Cytoscape.js, 将Cytoscape.js展示的内容导出为png图片. 内容导出同时实现全局导出与局部导出两种方式.

导出样例展示

原始页面

• 工具栏右侧两个按钮, 分别代表局部导出, 全图导出.
• 局部导出是指导出按住Shift键, 通过鼠标左键框选的区域.
• 全图导出是指导出图中所有完整关系网络, 包括关系网络内, 但展示区域外的所有内容.
• 导出时, 可以适当配置一下内容, 使导出的内容带有底部水印.
  

全局导出图片样式

局部导出图片样式

cytoscape.js Export方法 详情

cy.png() 导出png

• This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance. By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the maxWidth or maxHeight options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.
• 此函数将当前呈现的图形导出为图像, 因此您不能在隐式实例(headless instance, 可能有些不合适, 简单说就是未指定container的实例)上调用此函数. 默认情况下, 导出会考虑当前屏幕的像素密度, 以便图像与屏幕的质量相同. 如果指定了maxWidth或maxHeight选项, 则忽略屏幕像素密度, 以便图像能够适应指定的尺寸.
• Export the current graph view as a PNG image.
• 以PNG格式导出当前展示的视图内容.

构造方法

• 构造方法 cy.png( options )

参数详解

• The export options.
• 导出参数.

options参数详解

• options The export options.
  • output Whether the output should be 'base64uri' (default), 'base64', 'blob', or 'blob-promise' (a promise that resolves to the blob is returned).
  • 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.

options参数详解(翻译)

• options The export options.
  • output 输出方式, 可选选项有: 'base64uri' (默认选项), 'base64', 'blob', or 'blob-promise' (返回一个返回blob内容的promise对象).
  • bg 背景颜色 (默认transparent).
  • full 导出当前可视视图内容 (false, 默认项) 或完整视图内容 (true).
  • scale 一个正数, 用于指定结果图片大小的缩放比例.
  • maxWidth 与maxHeight 一起使用自动指定比例, 使合成的结果图片宽度不超过 maxWidth.
  • maxHeight 与maxWidth 一起使用自动指定比例, 使合成的结果图片高度不超过 maxHeight.

注意事项

• Specifying output:'blob-promise' is the only way to make this function non-blocking. Other outputs may hang the browser until finished, especially for a large image.
• 指定输出方式:'blob-promise'是使这个函数不阻塞的唯一方法. 其他输出方式可能会挂起浏览器, 直到完成, 特别是对于大图像.

cy.jpg() 导出jpg(jpeg)

• This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance. By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the maxWidth or maxHeight options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.
• 此函数将当前呈现的图形导出为图像, 因此您不能在隐式实例(headless instance, 可能有些不合适, 简单说就是未指定container的实例)上调用此函数. 默认情况下, 导出会考虑当前屏幕的像素密度, 以便图像与屏幕的质量相同. 如果指定了maxWidth或maxHeight选项, 则忽略屏幕像素密度, 以便图像能够适应指定的尺寸.
• Export the current graph view as a JPG image.
• 以JPG格式导出当前展示的视图内容.

别名

• cy.jpeg()

构造方法

• 构造方法 cy.jpg( options )

参数详解

• The export options.
• 导出参数.

options参数详解

• options The export options.
  • output Whether the output should be 'base64uri' (default), 'base64', 'blob', or 'blob-promise' (a promise that resolves to the blob is returned).
  • bg The background colour of the image (white 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.
  • quality Specifies the quality of the image from 0 (low quality, low filesize) to 1 (high quality, high filesize). If not set, the browser’s default quality value is used.

options参数详解(翻译)

• options The export options.
  • output 输出方式, 可选选项有: 'base64uri' (默认选项), 'base64', 'blob', or 'blob-promise' (返回一个返回blob内容的promise对象).
  • bg 背景颜色 (默认white).
  • full 导出当前可视视图内容 (false, 默认项) 或完整视图内容 (true).
  • scale 一个正数, 用于指定结果图片大小的缩放比例.
  • maxWidth 与maxHeight 一起使用自动指定比例, 使合成的结果图片宽度不超过 maxWidt