【Antv G6】可视化：导出带背景图的图片

需求描述：

将特定图片和背景合并后保存本地。
Antv G6自带的导出图片功能，只能设置背景色。如果希望是背景图片，需要将Antv保存的base64 URL和背景图img利用canvas合并，使用a标签模拟下载。

坑：

在Antv 中，将画布上元素生成为图片的 URL 有两个API，需要使用toFullDataURL，这样生成的图片有宽高。

实现：

 <canvas id="networkCanvas" style="display: none"></canvas>
    <img
      id="networkBackground"
      src="background.png"
      style="display: none"
      alt="背景图"
    />

savePicture() {
      this.graph.toFullDataURL(
        (res) => {
          var canvas = document.getElementById('networkCanvas')
          var background = document.getElementById('networkBackground')
          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(background, 0, 0)
            ctx.drawImage(img, 16, 16)
            // 下载
            var oA = document.createElement('a')
            oA.download = '图片名称'
            oA.href = canvas.toDataURL('image/png')
            document.body.appendChild(oA)
            oA.click()
            oA.remove() // 下载之后把创建的元素删除
          }
          img.src = res
        },
        'image/png',
        {
          imageConfig: {
            padding: 16,
          },
        }
      )
    },