共计 905 个字符,预计需要花费 3 分钟才能阅读完成。
需要形容:
将特定图片和背景合并后保留本地。
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,}, | |
} | |
) | |
}, |
正文完