ReactJS/NextJS 中的文本到图像

Question

我想在 ReactJS 中将一些文本转换为图像。并且图像应该有一个可以共享的链接。例如：- Spotify 的歌词共享系统。

我什么也没尝试。我搜索了一些图书馆但一无所获。

Answer 1

在 React 中，您可以通过几种不同的方式将文本转换为图像：

使用 Canvas API：Canvas API 提供了一种使用 fillText 方法将文本绘制到画布元素上的方法。然后，您可以使用 toDataURL 方法将画布转换为可用作元素源的图像数据 URL。前任 ：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillText('Hello, world!', 10, 50);
const dataUrl = canvas.toDataURL();

或者你可以使用像 html2canvas 这样的第三方库，它可以直接将 DOM 元素或 HTML 字符串转换为图像。