Grommet TextArea 將多行文本導出為圖像中的單行

Question

我想將 Grommet TextArea導出為圖像。 如果只有一行文本，則以下代碼有效。 但是，如果我調整TextArea組件以使文本填充多行，則不會在 output 圖像中導出。

這就是它的外觀（1 - 是包含我要導出的多行TextArea的頁面，2 - 導出的TextArea ，僅包含一行文本）

好像我只是缺少關於 HTML canvas 的東西。 或者也許 Grommet TextArea中有一些屬性有助於改變這種行為？

應用程序.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);

索引.html：

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

Answer 1

我認為問題在於圖像的導出方式。 我只使用 HTML 的“textarea”而不是 Grommet TextArea 組件創建了一個快速測試，但問題仍然存在：

我已經通過在他們的演示應用程序上運行 HTML 示例驗證了您所描述的行為是react-component-export-image package 的預期行為，這似乎是他們的核心功能行為。 您可能需要提交要求支持多行屏幕截圖的增強請求。 這是在他們的演示應用程序上運行 HTML 示例的屏幕截圖示例：

Answer 2

該問題來自html2canvas庫，它是react-component-export-image的核心。 在html2canvas社區中有幾個關於這個問題的線程，包括這個（我猜是主要的）： https://github.com/niklasvh/html2canvas/issues/2008

最好的解決方案（在我的情況下也有幫助）是使用contenteditable div 而不是textarea元素