Antv|Antv 导出带背景图的图片
需求描述：
将特定图片和背景合并后保存本地。
Antv自带的导出图片功能，只能设置背景色。如果希望是背景图片，需要将Antv保存的base64 URL和背景图img利用canvas合并，使用a标签模拟下载。
坑：
【Antv|Antv 导出带背景图的图片】在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 = https://www.it610.com/article/canvas.toDataURL('image/png')
document.body.appendChild(oA)
oA.click()
oA.remove() // 下载之后把创建的元素删除
}
img.src = https://www.it610.com/article/res
},'image/png',
{
imageConfig: {
padding: 16,
},
}
)
},推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 精神，带我走向人生的天堂！
- 带有Hilt的Android上的依赖注入
- python自定义封装带颜色的logging模块
- 皮夹克
- 油菜花田的小路像绶带
- 不废话，代码实践带你掌握|不废话，代码实践带你掌握 强缓存、协商缓存！
- 《离开却带走了“能量的魔杖”（52）》能量爱情公寓
- 《生不带来死不带去》
- 爸爸带我买文具。