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

时间:2021-01-27 12:12:02

标签: reactjs

我正在尝试使用 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,但现在我对新语法迷失了方向。

1 个答案:

答案 0 :(得分:2)

正如文档中提到的

How to Upgrade

<块引用>

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

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

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

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

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

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

相关问题