0

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

这是它的外观（1 - 是包含TextArea我要导出的多行的页面，2 - 导出TextArea的，仅包含一行文本） 在此处输入图像描述

好像我只是错过了一些关于 HTML 画布的东西。或者，也许 GrommetTextArea中有一些属性有助于改变这种行为？

应用程序.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>
4

2 回答 2

1

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

我已经通过在他们的演示应用程序上运行 HTML 示例验证了您所描述的行为是react-component-export-image包中的预期行为，这似乎是他们的核心功能行为。您可能需要提交要求支持多行屏幕截图的增强请求。这是在他们的演示应用程序上运行 HTML 示例的屏幕截图示例：

在此处输入图像描述

于 2021-03-03T20:50:47.973 回答
0

该问题来自html2canvas图书馆，这是react-component-export-image. 社区中有几个关于这个问题的线程html2canvas，包括这个（我猜是主要的）： https ://github.com/niklasvh/html2canvas/issues/2008

最好的解决方案（在我的情况下也有帮助）是使用contenteditablediv 而不是textareaelement

于 2021-03-08T09:31:54.393 回答