共计 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,},
}
)
},
正文完