需要形容:

将特定图片和背景合并后保留本地。
Antv自带的导出图片性能,只能设置背景色。如果心愿是背景图片,须要将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,          },        }      )    },