React 中的即时缩略图
On-the-fly thumbnails in React
我正在使用 React 开发一个网站，其中包含我们所谓的“片段”，基本上是一种模式 window 显示某种媒体（音频、视频、幻灯片、文本引用、pdf）。这些媒体具有“位置”，如页码、图像编号、播放位置或滚动位置。如果她喜欢，用户可以将这些片段连同它们的位置一起存储在“储物柜”中，稍后再回来查看其中的任何内容。在视觉上，储物柜将保存片段的“缩略图”，表示片段在存储时的外观。我的问题是如何制作这样一个即时缩略图。我想到了两种方法，但是，如果您有其他想法，我很想听听。
组件方法：因为我已经有了组件，所以我可以重用或克隆它，缩小它，禁用它进行鼠标交互。 React.cloneElement() 是正确的选择吗？
- 优点：容易做。
- 缺点：过多重复的潜在资源密集型组件可能会降低网站速度。样式可能会变得很重要，因为某些嵌入式媒体（音频、视频）会自带可能无法访问的样式。
图片生成方法：因为我只需要一张图片，所以我可以截取snippet区域的截图，缩小后使用。这可以在客户端完全完成（从生成到使用）吗？有没有好的图书馆可以帮我完成繁重的工作？
- 优点：仅在制作缩略图时占用大量资源，在储物柜中占用较少资源。可用于任何样式。
- 缺点：可能很难做到？
经过一番研究，我找到了解决办法。有趣的是，它是我能想到的两种方法的混合体。可以访问和栅格化构成片段的 DOM 元素，将它们绘制在 canvas 上并将其转换为图像。最受欢迎的库似乎是 html2canvas, however, there are a number of others among which rasterizeHTML and html-to-image seem to stand out. Often wrappers for React exist, in the case of html2canvas, for example, use-react-screenshot.
我正在使用 React 开发一个网站，其中包含我们所谓的“片段”，基本上是一种模式 window 显示某种媒体（音频、视频、幻灯片、文本引用、pdf）。这些媒体具有“位置”，如页码、图像编号、播放位置或滚动位置。如果她喜欢，用户可以将这些片段连同它们的位置一起存储在“储物柜”中，稍后再回来查看其中的任何内容。在视觉上，储物柜将保存片段的“缩略图”，表示片段在存储时的外观。我的问题是如何制作这样一个即时缩略图。我想到了两种方法，但是，如果您有其他想法，我很想听听。
组件方法：因为我已经有了组件，所以我可以重用或克隆它，缩小它，禁用它进行鼠标交互。
React.cloneElement()是正确的选择吗？- 优点：容易做。
- 缺点：过多重复的潜在资源密集型组件可能会降低网站速度。样式可能会变得很重要，因为某些嵌入式媒体（音频、视频）会自带可能无法访问的样式。
图片生成方法：因为我只需要一张图片，所以我可以截取snippet区域的截图，缩小后使用。这可以在客户端完全完成（从生成到使用）吗？有没有好的图书馆可以帮我完成繁重的工作？
- 优点：仅在制作缩略图时占用大量资源，在储物柜中占用较少资源。可用于任何样式。
- 缺点：可能很难做到？
经过一番研究，我找到了解决办法。有趣的是，它是我能想到的两种方法的混合体。可以访问和栅格化构成片段的 DOM 元素，将它们绘制在 canvas 上并将其转换为图像。最受欢迎的库似乎是 html2canvas, however, there are a number of others among which rasterizeHTML and html-to-image seem to stand out. Often wrappers for React exist, in the case of html2canvas, for example, use-react-screenshot.