将 HTML 转换为原始尺寸的图像
Convert HTML to Image at its Original Dimentions
我一直在尝试将我的反应代码中的 HTML 节点转换为图像，然后再下载。我们可以使用几个库来为我们执行该工作，例如 html-to-image、dom-to-image。但问题是这些库以其视图大小而不是原始大小下载图像。
我的意思是，如果我有一个组件在不同的屏幕上有不同的样式，当我下载该组件的图像时，我希望图像具有更大屏幕的样式，而不管我当前的 window大小是。
如果我有一个以 window 大小扩展和收缩的响应式组件，我希望该组件的图像看起来像组件在更大屏幕上的样子。
如果您想下载具有原始尺寸的图片，只需使用 width 和 height 作为图片的宽度和高度。
如果要下载容器尺寸的图像，包括容器中使用的填充，则使用图像元素的 clientWidth 和 clientHeight 属性。
如果您想以图像的原始尺寸下载图像，则只需使用宽度和高度作为图像的宽度和高度。如果要下载容器尺寸的图像，包括容器中使用的填充，则使用图像元素的 clientWidth 和 clientHeight 属性。将图像编辑为所需的最低像素。
我发现我们只能以其视图大小和样式下载 React 树中的 HTML 节点。假设我们在一个页面中有一个table。当我们在大屏幕上时，我们会以一种样式看到 table。但在较小的屏幕上，我们会看到不同的风格。当我们下载 table 的图像时，我们希望 table 以其 large-screen 样式和大小下载，而不考虑屏幕尺寸。
显然，我们只能下载实体 DOM 中存在的内容。如果物理 DOM 有较小的版本，我们只能下载较小的版本。如果物理 DOM 包含更大版本的 table 我们可以下载更大的版本。
我克服这个问题的方法是在用户想要下载那个 table 的图像时打开一个模式。我在该模态上绘制了一个具有固定高度和宽度的 table 的大版本，并从该模态下载了图像。在较小的屏幕上，模态框内的这个大 Table 看起来不是很好，即使它只出现了片刻。所以为了隐藏这个大 table，我在固定位置的顶部放了一个漂亮的加载动画。
下载完成后，我关闭模态。
我一直在尝试将我的反应代码中的 HTML 节点转换为图像，然后再下载。我们可以使用几个库来为我们执行该工作，例如 html-to-image、dom-to-image。但问题是这些库以其视图大小而不是原始大小下载图像。
我的意思是，如果我有一个组件在不同的屏幕上有不同的样式，当我下载该组件的图像时，我希望图像具有更大屏幕的样式，而不管我当前的 window大小是。
如果我有一个以 window 大小扩展和收缩的响应式组件，我希望该组件的图像看起来像组件在更大屏幕上的样子。
如果您想下载具有原始尺寸的图片，只需使用 width 和 height 作为图片的宽度和高度。
如果要下载容器尺寸的图像，包括容器中使用的填充，则使用图像元素的 clientWidth 和 clientHeight 属性。
如果您想以图像的原始尺寸下载图像，则只需使用宽度和高度作为图像的宽度和高度。如果要下载容器尺寸的图像，包括容器中使用的填充，则使用图像元素的 clientWidth 和 clientHeight 属性。将图像编辑为所需的最低像素。
我发现我们只能以其视图大小和样式下载 React 树中的 HTML 节点。假设我们在一个页面中有一个table。当我们在大屏幕上时，我们会以一种样式看到 table。但在较小的屏幕上，我们会看到不同的风格。当我们下载 table 的图像时，我们希望 table 以其 large-screen 样式和大小下载，而不考虑屏幕尺寸。
显然，我们只能下载实体 DOM 中存在的内容。如果物理 DOM 有较小的版本，我们只能下载较小的版本。如果物理 DOM 包含更大版本的 table 我们可以下载更大的版本。
我克服这个问题的方法是在用户想要下载那个 table 的图像时打开一个模式。我在该模态上绘制了一个具有固定高度和宽度的 table 的大版本，并从该模态下载了图像。在较小的屏幕上，模态框内的这个大 Table 看起来不是很好，即使它只出现了片刻。所以为了隐藏这个大 table，我在固定位置的顶部放了一个漂亮的加载动画。 下载完成后，我关闭模态。