蚂蚁设计图表下载图像背景颜色选项未应用

Question

我在 React 上创建了一个组件。我想使用

downloadImage

函数加载 png 图像 https://antv-g6.gitee.io/en/docs/api/graphFunc/download#graphdownloadimagename-type-backgroundcolor.

但是

backgroundColor

对我不起作用，背景总是透明的。

import React from 'react';
import { Line } from '@ant-design/charts';
    
export const MyComponent = () => {
    const config = {
        onReady: (chart) => {
            setTimeout(() => {
                // '#ff000' also is not working
                chart.downloadImage('ImageName', 'image/png', 'red');
            }, 5000);
        },
    };
    
    return (<Line {...config} />);
};

react v18.2
antd v4.24.10
@ant-design/charts v1.4.2
@antv/g2 v4.2.10
@antv/s2 v1.48.0

我该如何解决它。或者我可以使用哪个功能来下载图表作为图像？

Answer 1

对于仍然遇到此问题的人，downloadImage函数接受三个参数：

name

：所需的文件名（默认：“下载”）。

type

：图像格式，例如“image/png”或“image/jpeg”（默认值：“image/png”）。

encoderOptions

：控制 JPEG 等格式的图像质量（0 到 1 之间的数字）。 PNG 会被忽略，因为它使用无损压缩。

注意：

encoderOptions

无法设置背景颜色。调用

toDataURL

时，背景由画布内容决定。如果画布具有透明度，PNG 也会。

要设置纯色背景色，您需要在调用该函数之前修改画布本身。