cytoscape.js实现导出图片png
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
ormaxHeight
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 withmaxHeight
such that the resultant image is no wider thanmaxWidth
.maxHeight
Specifies the scale automatically in combination withmaxWidth
such that the resultant image is no taller thanmaxHeight
.
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
ormaxHeight
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 withmaxHeight
such that the resultant image is no wider thanmaxWidth
.maxHeight
Specifies the scale automatically in combination withmaxWidth
such that the resultant image is no taller thanmaxHeight
.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