Twaver-HTML5基础学习(37)network导出图片并下载

network导出图片

代码：

/** @Descripttion: * @version: * @Author: ZhangJunQing* @Date: 2022-04-18 14:44:05* @LastEditors: ZhangJunQing* @LastEditTime: 2022-05-05 16:29:34*/
import React, { useEffect, useState } from 'react'const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {const [network, setnetwork] = useState({})const [src, setsrc] = useState("")const init = () => {var box = new twaver.ElementBox();var network = new twaver.vector.Network(box);setnetwork(network)network.invalidateElementUIs();network.adjustBounds({ x: 0, y: 0, width: 500, height: 500 });document.getElementById("testID").appendChild(network.getView());var autoLayouter = new twaver.layout.AutoLayouter(box);network.setScrollBarVisible(false)var from1 = new twaver.Node();from1.setName('from1');box.add(from1);var to = new twaver.Node();to.setName('To');box.add(to);var from2 = new twaver.Node();from2.setName('from2');box.add(from2);var from3 = new twaver.Node();from3.setName('from3');box.add(from3);var from4 = new twaver.Node();from4.setName('from4');box.add(from4);var link = new twaver.Link(from1, to);var link2 = new twaver.Link(from2, to);var link3 = new twaver.Link(from3, to);var link4 = new twaver.Link(from4, to);link.setName('Link');link2.setName('link2');link3.setName('link3');link4.setName('link4');box.add(link);box.add(link2);box.add(link3);box.add(link4);autoLayouter.doLayout('symmetry', function () {network.zoomOverview(false);});}useEffect(init, [])const exportFun = () => {var canvas;if (network.getCanvasSize) {//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);canvas = network.toCanvas(400, 400);} else {canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);}if (twaver.Util.isIE) {} else {var Imgsrc = canvas.toDataURL("image/png");var link = document.createElement('a')setsrc(Imgsrc)link.href = Imgsrcconsole.log(Imgsrc)link.download = "imgName"document.body.appendChild(link)link.click()document.body.removeChild(link)}}return (<><p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p><ul style={{ fontSize: "20px", paddingLeft: "50px" }}><li>导出img</li><button onClick={exportFun}>点击，导出network pic</button><img style={{ width: "200px", height: "200px" }} src={src}></img></ul>{/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}<div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div></>)
}
export default Demo

主要就是利用twaver自带的方法转成canvas对象。

    if (network.getCanvasSize) {//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);canvas = network.toCanvas(400, 400);} else {canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);}

然后将canvas变成base64，在页面显示并导出：

 const exportFun = () => {var canvas;if (network.getCanvasSize) {//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);canvas = network.toCanvas(400, 400);} else {canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);}if (twaver.Util.isIE) {} else {var Imgsrc = canvas.toDataURL("image/png");var link = document.createElement('a')setsrc(Imgsrc)link.href = Imgsrcconsole.log(Imgsrc)link.download = "imgName"document.body.appendChild(link)link.click()document.body.removeChild(link)}

学习参考：TWaver Documents

Twaver-HTML5基础学习(37)network导出图片并下载相关推荐

【html5基础学习速成】
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息.HTML5在从前HTML4.01的基础 ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
Python基础学习：svn导出差异文件脚本
由于是刚接触python不久,所以很多都不是很熟练,只能是用到什么查点什么.所以如果有什么bug或者不严谨的语法或其他,希望各位看客指正. 鉴于公司的平台研发部门需求想直接把svn中的差异代码导出并打 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
IOS网络基础学习三：NSURLSession的Download下载任务和代理方法
文章目录 block下载任务下载代理方法 block下载任务 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UI ...
uniapp/小程序 canvas画布导出图片并下载到本地
如果微信原生的话,此处uni可以换成wx this.canvas是上一篇文章生成的canvas画布 uni.canvasToTempFilePath({// res.tempFilePath临时路径c ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...

Twaver-HTML5基础学习(37)network导出图片并下载

network导出图片

Twaver-HTML5基础学习(37)network导出图片并下载相关推荐

最新文章

热门文章