cytoscape.js实现导出图片png

cytoscape.js
导出样例展示
cytoscape.js `Export `方法 [详情](https://js.cytoscape.org/#core/export)
- `cy.png()` 导出png
- - 构造方法
  - 参数详解
  - 注意事项
- `cy.jpg()` 导出jpg(jpeg)
- - 别名
  - 构造方法
  - 参数详解
  - 注意事项
导出全局png图片
导出全局带有水印的png图片
导出部分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 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 一起使用自动指定比例, 使合成的结果图片宽度不超过 maxWidth.
- maxHeight 与maxWidth 一起使用自动指定比例, 使合成的结果图片高度不超过 maxHeight.
- quality 指定映像的质量从0(低质量, 低文件大小)到1(高质量, 高文件大小). 如果没有设置, 则使用浏览器的默认质量值.

注意事项

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'是使这个函数不阻塞的唯一方法. 其他输出方式可能会挂起浏览器, 直到完成, 特别是对于大图像.
The JPEG format is lossy, whereas PNG is not. This means that cy.jpg() is useful for cases where filesize is more important than pixel-perfect images. JPEG compression will make your images (especially edge lines) blurry and distorted.
JPEG格式是有损的, 而PNG不是. 这意味着在文件大小比像素完美的图像更重要的情况下, cy.jpg() 非常有用. JPEG压缩将致使您的图像变得(特别是边缘线)模糊和扭曲.

导出全局png图片

/**
* 导出全局图片.
*/
exportPng() {let blob = this.$cy.png({output: 'blob', bg: 'transparent', full: true, scale: 4, quality: 1});let aLink = document.createElement('a');let evt = document.createEvent("HTMLEvents");evt.initEvent("click", true, true);aLink.download = `${new Date().getTime()}.png`;aLink.href = URL.createObjectURL(blob);aLink.dispatchEvent(evt);aLink.click();
},

导出全局带有水印的png图片

/*** 绘制水印.*/
drawWatermark({canvas = null,words = `机密信息, 请勿外传! 时间: ${new Date().toTimeString()}`,width = 200,height = 200,font = "15px microsoft yahei", //水印字体设置fillStyle = "rgba(0, 0, 0, 0.3)", //水印字体颜色设置rotate = 10 * Math.PI / 180, //水印字体倾斜角度设置, 正数顺时针, 负数逆时针positionX = 20, // X 轴偏移像素positionY = 20, // Y 轴偏移像素} = {}) {let tempCanvas = document.createElement('canvas');[tempCanvas.width, tempCanvas.height] = [width, height];let tempCtx = tempCanvas.getContext("2d");/** 清除画布 */tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);/** 文字倾斜角度 */tempCtx.rotate(rotate);/** 字体样式及颜色 */[tempCtx.font, tempCtx.fillStyle] = [font, fillStyle];let [wordsArr, index, s] = [[], 0, ''];for (let code of words) {s += code;code.codePointAt(0) > 255 ? index += 2 : index += 1;(index > tempCanvas.width / 11.25) && (wordsArr.push(s)) && ([index, s] = [0, '']);}wordsArr.push(s);for (let i = 0; i < wordsArr.length; i++) {tempCtx.fillText(wordsArr[i], positionX, positionY + i * 20, tempCanvas.width - positionX);}let ctx = canvas.getContext("2d");ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");ctx.fillRect(0, 0, canvas.width, canvas.height);
},
/*** 导出全局图片带有水印.*/
exportPngAndWatermark() {let time = new Date().getTime();let blob = this.$cy.png({output: 'blob', bg: 'transparent', full: true, scale: 4, quality: 1});let image = new Image();[image.id, image.crossOrigin, image.src] = [time, 'anonymous', window.URL.createObjectURL(blob)];image.onload = () => {let canvas = document.createElement('canvas');[canvas.width, canvas.height] = [image.width, image.height];let ctx = canvas.getContext('2d');/** 绘制水印 */this.drawWatermark({canvas: canvas, words: `机密信息, 请勿外传! 时间: ${new Date().toTimeString()}`});/** 绘制原图 */ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);ctx.save();let [aLink, evt] = [document.createElement('a'), document.createEvent("HTMLEvents")];evt.initEvent("click", true, true);[aLink.download, aLink.href] = [`${time}.png`, canvas.toDataURL("image/png")];aLink.dispatchEvent(evt);aLink.click();}
},

导出部分png图片(参数控制是否包含水印)

依赖于上述全局导出方法

/*** 导出局部图片.*/
exportCutPng({watermark = false} = {}) {let unselectedVertexes = this.$cy.elements('node:unselected')if (!unselectedVertexes || 0 == unselectedVertexes.length) {return false;}let remove = unselectedVertexes.remove(); // 保留删除内容watermark ? this.exportPngAndWatermark() : this.exportPng();(remove && remove.length) && (remove.restore()); // 恢复删除内容
},

本文到此结束, 请指教.

cytoscape.js导出图片png或jpg相关推荐

js导出图片添加水印
// js文件 let WaterMark = (() => {let painter = null// 获取画笔对象function getPainter(w,h) {if(painter = ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
js导出excel数据，图片，身份证号码
JavaScript导出图片和数据到Excel 解决了以下问题: 1.解决了图片大小的问题 2.解决身份证号码后3位是0的问题 3.时间转换问题先上个完成图哈首先遇到的问题是图片是base64的格 ...
【解决】html2canvas.js截图只截取当前可视区域；导出图片不全
问题:之前使用orgchart团队架构图导出图片,会出现图片导出不全的问题原因:当时使用tab标签分类显示的时候,当前选中模块显示内容,未选中模块内容设置为隐藏状态.而html2canvas插件无法 ...
前端追梦人Cytoscape.js教程
一. Cytoscape.js简介与安装 1.1 Cytoscape.js是什么? cytoscape.js是一个做网页可视化的常用工具 .cytoscape.js包含图论模型和可选的渲染器,用于显示 ...
把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）
先看下效果图:(上面灰色块内的用div和CSS写出来的,然后绘制到canvas) 实现此功能需要使用到一个微信小程序的插件,插件官方文档地址: wxml-to-canvas | 微信开放文档本博客代 ...
浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

cytoscape.js导出图片png或jpg

cytoscape.js实现导出图片png

cytoscape.js

导出样例展示

cytoscape.js `Export`方法详情

`cy.png()` 导出png

构造方法

参数详解

注意事项

`cy.jpg()` 导出jpg(jpeg)

别名

构造方法

参数详解

注意事项

导出全局png图片

导出全局带有水印的png图片

导出部分png图片(参数控制是否包含水印)

cytoscape.js导出图片png或jpg相关推荐

最新文章

热门文章

cytoscape.js导出图片png或jpg

cytoscape.js实现导出图片png

cytoscape.js

导出样例展示

cytoscape.js Export方法 详情

cy.png() 导出png

构造方法

参数详解

注意事项

cy.jpg() 导出jpg(jpeg)

别名

构造方法

参数详解

注意事项

导出全局png图片

导出全局带有水印的png图片

导出部分png图片(参数控制是否包含水印)

cytoscape.js导出图片png或jpg相关推荐

最新文章

热门文章

cytoscape.js `Export`方法详情

`cy.png()` 导出png

`cy.jpg()` 导出jpg(jpeg)