需要形容:
将特定图片和背景合并后保留本地。
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, }, } ) },