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 = Imgsrc
            console.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 = Imgsrc
            console.log(Imgsrc)
            link.download = "imgName"
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        }

学习参考：TWaver Documents