如何解决Grommet TextArea 将多行文本导出为图像中的单行
我想将 grommet 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>
);
}
}
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>
解决方法
我认为问题在于导出图像的方式。我仅使用 HTML 的“textarea”而不是 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
元素
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。