将组件导出为具有透明背景的 PNG

Question

我正在尝试使用 exportComponentAsPNG 库中的 react-component-export-image 函数： https://www.npmjs.com/package/react-component-export-image

exportComponentAsPNG(node, {fileName, html2CanvasOptions})

如果我只传递一个组件，这个函数效果很好。但是我不能让它与可选的 params 一起工作并生成具有透明背景的图像（也许我通常缺少关于 JS 的可选参数转换的一些内容）。所以我试图传递一个 backgroundColor 选项，我认为这应该有助于我获得透明背景。我已经尝试过的：

• exportComponentAsPNG(node, backgroundColor = null);
• exportComponentAsPNG(node, backgroundColor: null);
• exportComponentAsPNG(node, { backgroundColor: null });

我可以使用以前版本的 backgroundColor API 指定 react-component-export-image，但现在我对新语法迷失了方向。

Answer 1

正如文档中提到的

How to Upgrade

<块引用>

以前使用导出的方式如下所示：

exportComponentAsJPEG(node, fileName, type, backgroundColor, options)

• 新方法：传递节点和仅包含您需要的字段的可选对象。
• backgroundColor 在这个主对象中不再被接受，而是在“html2CanvasOptions”对象中被接受，该对象被直接传递给 html2canvas

如果你说它以前在 backgorundColor 等于 null 的情况下工作过，你应该这样称呼它

exportComponentAsPNG(node, { html2CanvasOptions: {backgroundColor: null} })

你也可以看看它的实现src-code