Javascript 套圈文本区域将多行文本导出为图像中的单行

我想将索环

TextArea

导出为图像。如果只有一行文本，下面的代码可以工作。但是，如果我调整

TextArea

组件，使文本填充多行，这将不会在输出图像中导出

这就是它的外观（1-是包含我要导出的多行

TextArea

的页面，2-导出的

TextArea

，只包含一行文本）

似乎我只是缺少了一些关于HTML画布的东西。或者Grommet

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>
    );
  }
}

import ReactDOM from "react-dom";

import App from "./App";

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

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

import React，{Component}来自“React”；
从“套圈”导入{TextArea}；
导入“/styles.css”；
从“react component export image”导入{exportComponentAsPNG}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.textRef=React.createRef（）；
this.state={text:”“}；
}
render（）{
const{text}=this.state；
返回(
this.setState（{text:event.target.value}）
/>
exportComponentAsPNG（this.textRef）}>
点击
);
}
}

index.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>
    );
  }
}

import ReactDOM from "react-dom";

import App from "./App";

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

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

从“react-dom”导入ReactDOM；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

index.html:

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>
    );
  }
}

import ReactDOM from "react-dom";

import App from "./App";

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

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

---

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

通过在他们的演示应用程序上运行HTML示例，我已经验证了您描述的行为是

react component export image

包中的预期行为，这似乎是他们的核心功能行为。您可能希望支持多行屏幕截图。以下是在演示应用程序上运行HTML示例的屏幕截图示例：

---

问题来自

html2canvas

库，它是

react组件导出映像的核心。
在
html2canvas
社区中，有几个关于这个问题的线程，包括这一个（我想是主线程）：

最好的解决方案（在我的例子中也有帮助）是使用
contenteditable
div而不是
textarea
element
，感谢您的澄清！也许你知道另一个库说了功能？