使用dom下载到图像库时排除元素

Question

我正在使用dom到图像库将组件下载为png图像。然而，我希望从下载的图像中排除一些元素，如关闭按钮等

我尝试了这种方法，设置可见的真/假，并用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]);