Antv 导出带背景图的图片

需求描述:

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

坑:

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

实现:

 
    
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,
          },
        }
      )
    },

你可能感兴趣的:(Antv 导出带背景图的图片)