【Antv G6】导出图片

需求

将Antv G6生成的树形图导出成图片

代码

<div style="height: calc(100% - 50px);">
    <div id="miniMap" class="minimap"></div>
    <div id="containerG6" ref="containerG6" class="containerWrap"></div>
</div>

var that = this
this.treeGraph.toFullDataURL(
    res => {
        // 为了防止下载的图片影响到G6显示，这里作一个深度拷贝
        var canvas = document.getElementById('containerG6').childNodes[0].cloneNode(true)
        var img = new Image()
        img.onload = function () {
            canvas.width = img.width + 32
            canvas.height = img.height + 32
            var ctx = canvas.getContext('2d')
            ctx.fillStyle = '#fff'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(img, 16, 16)
            // 下载
            var oA = document.createElement('a')
            oA.download = '组织架构图-' + that.modelTitle
            oA.href = canvas.toDataURL('image/png')
            document.body.appendChild(oA)
            oA.click()
            oA.remove() // 下载之后把创建的元素删除
        }
        img.src = res
    },
    'image/png',
    {
        imageConfig: {
            padding: 16
        }
    }
)

扩展

浏览器上的任意元素都可转化成canvas，然后下载下来。