Исключить элемент при загрузке с помощью библиотеки dom-to-image

Question

Я использую библиотеку dom-to-image для загрузки компонента в виде изображения png. Однако я хочу, чтобы некоторые элементы были исключены из загруженного изображения, например кнопка закрытия, и т. Д. c

Я пытался с этим подходом установить видимое значение true / false и скрыть его с помощью CSS:

const [visible, setVisible] = React.useState(true);

    const closeClassName = classNames(classes.visible, {
        [classes.hidden]: visible === false,
    });

    const downloadTemperaturesGraph = React.useCallback(() => {
        if (chartRef.current) {
            setVisible(false);
            domtoimage.toBlob(chartRef.current, { bgcolor: 'white' }).then((blob) => {
                fileDownload(blob, `${title}.png`);
            });

            setTimeout(() => {
                setVisible(true);
            });
        }
    }, [chartRef, title]);

Есть ли лучший способ сделать это? Можно ли это сделать с помощью параметра фильтра библиотеки?

Answer 1

Это можно сделать с помощью опции фильтра:

 const closeRef = React.useRef<HTMLDivElement>(null);

 const downloadTemperaturesGraph = React.useCallback(() => {
        if (chartRef.current) {
            domtoimage
                .toBlob(chartRef.current, {
                    bgcolor: 'white',
                    filter: (node: Node) => node !== closeRef.current,
                })
                .then((blob) => {
                    fileDownload(blob, `${title}.png`);
                });
        }
    }, [chartRef, title]);