antvis / antvis/G6

[Bug]: 设置背景颜色,但不能导出。用drawImage进行拷贝之后导出,导出无法显示拓补的图像数据

Open
#7,425 3 comments 0 reactions 0 assignees View on GitHub
bug 🐛 question 💬
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

拓补展示的
Image
实际导出的

Image

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

1. 随便选取一个示例加上
`
plugins: [
{
type: 'background',
background: 'red'
}
]
`
2. 导出
`const a = document.createElement('a')
const graphDataUrl = await this.graph.toDataURL({
mode: 'overall'
})
a.href = graphDataUrl
a.download = 'graph.jpg'
a.click()
`
会发现没有背景

3. 将dataUrl放在img加载,然后绘制在canvas,内容绘制不出
`
// 将DataURL转换为Canvas并添加背景颜色
function dataURLToCanvas(dataURL, backgroundColor = '#f0f2f5') {
return new Promise((resolve, reject) => {
// 创建Image对象
const img = new Image();

// 设置图片加载完成后的回调
img.onload = function() {
// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置Canvas尺寸与图片相同
canvas.width = img.width;
canvas.height = img.height;

// 第一步:填充背景颜色
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 第二步:绘制图片(这会覆盖在背景之上)
ctx.drawImage(img, 0, 0);

// 返回Canvas元素
resolve(canvas);
};

// 设置图片加载失败的回调
img.onerror = function() {
reject(new Error('Failed to load image from DataURL'));
};

// 将DataURL设置为图片源
img.src = dataURL;
});
}

// 使用示例
async function convertAndAddBackground() {
try {
// 假设 dataURL 是你已有的DataURL
const canvas = await dataURLToCanvas(dataURL, '#f0f2f5');

// 现在你可以使用这个Canvas做进一步操作
// 例如转换为其他格式或直接显示在页面上
document.body.appendChild(canvas);

// 或者转换为Blob进行下载
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'image-with-background.png';
a.click();
URL.revokeObjectURL(url);
}, 'image/png');

} catch (error) {
console.error('Error:', error);
}
}
`
4. 直接使用drawImage来拷贝拓补的canvas,也是空

### Version / 版本

Please select / 请选择

### OS / 操作系统

- [ ] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [ ] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the graph.toDataURL({ mode: 'overall' }) call and reproduce the export using the provided background plugin. Then compare that result with the dataURLToCanvas helper and the direct drawImage case in the report. Done means the exported image preserves both the background color and the topology image data.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.