索环 TextArea 将多行文本导出为图像中的单行

Grommet TextArea exports multiline text as a single line in the image

我想将索环 TextArea 导出为图像。如果只有一行文本,则以下代码有效。但是如果我调整 TextArea 组件使文本填充多行,这将不会在输出图像中导出。

这是它的外观(1 - 是包含我要导出的多行 TextArea 的页面,2 - 导出的 TextArea,仅包含一行文本)

好像我只是遗漏了一些关于 HTML canvas 的东西。或者索环 TextArea 中可能有一些 属性 有助于改变这种行为?

App.js:

import React, { Component } from "react";
import { TextArea } from "grommet";
import "./styles.css";
import { exportComponentAsPNG } from "react-component-export-image";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.textRef = React.createRef();

    this.state = { text: "" };
  }

  render() {
    const { text } = this.state;
    return (
      <div className="App">
        <TextArea
          ref={this.textRef}
          value={text}
          onChange={(event) => this.setState({ text: event.target.value })}
        />
        <button onClick={() => exportComponentAsPNG(this.textRef)}>
          Click
        </button>
      </div>
    );
  }
}

index.js:

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

index.html:

<div id="root"></div>

我认为问题在于图像的导出方式。我仅使用 'textarea' 或 HTML 而不是 Grommet TextArea 组件创建了一个快速测试,但问题仍然存在:

我已经验证了您所描述的行为是 运行 包中 HTML 示例在他们的演示应用程序中的 react-component-export-image 包的预期行为,看起来这是他们的核心功能行为。您可能想要 file an enhancement request 要求支持多行屏幕截图。这是来自 运行 的屏幕截图示例,他们的演示应用程序中的 HTML 示例:

问题出自 html2canvas 库,它是 react-component-export-image 的核心。 在 html2canvas 社区中有几个关于这个问题的话题,包括这个(我想是主要的): https://github.com/niklasvh/html2canvas/issues/2008

最好的解决方案(对我的情况也有帮助)是使用 contenteditable div 而不是 textarea element