将HTML转换为原始尺寸的图像



我一直在尝试将我的react代码中的HTML节点转换为Image并随后下载它。有几个库可以帮我们完成这项工作,比如html-to-image, dom-to-image。但问题是这些库下载的图像是其视图大小,而不是其原始大小。

我的意思是如果我有一个组件,它有不同的风格在不同的屏幕当我下载一个图像组件我希望图像风格的大屏幕,无论我现在的窗口大小是什么。

如果我有一个响应式组件,它会随着窗口大小展开和缩小,我希望该组件的图像看起来像该组件在大屏幕上的样子。

如果您想下载具有图像原始尺寸的图像,那么只需使用widthheight作为图像的宽度和高度。如果您想下载带有容器尺寸的图像,包括在容器中使用的填充,则使用图像元素的clientWidthclientHeight属性。

参考此链接

如果您想下载具有图像原始尺寸的图像,那么只需使用width和height作为图像的宽度和高度。如果您想下载带有其容器尺寸(包括容器中使用的填充)的图像,则使用image元素的clientWidth和clienttheight属性。编辑图像的最小像素要求。

我发现我们只能在react树中下载其视图大小和样式的HTML节点。假设我们有一个表在一个页面。当我们在大屏幕上时,我们看到的是一种样式的表格。但在较小的屏幕上,我们看到的是另一种风格。当我们下载的图像表,表下载我们想要的大屏幕样式和大小,无论屏幕的大小。

显然,我们只能下载物理DOM中存在的内容。如果物理DOM的版本较小,我们只能下载较小的版本。如果物理DOM包含更大版本的表,我们可以在上面下载更大版本的表。

我所做的是克服这个问题是打开一个模态当用户想要下载该表的图像。我在那个模态上画了一个固定高度和宽度的大版本的表,并从那个模态下载了图像。在较小的屏幕上,这个模态中的大表看起来不太好,即使只有几分钟。为了隐藏这个大桌子,我在上面放了一个固定位置的加载动画。下载完成后,我关闭了模式。

最新更新