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

【问题标题】：Convert HTML to Image at its Original Dimentions将 HTML 转换为原始尺寸的图像
【发布时间】：2021-11-30 16:33:36
【问题描述】：

我一直在尝试将我的反应代码中的 HTML 节点转换为图像，然后下载它。我们可以使用几个库来为我们执行这项工作，例如 html-to-image、dom-to-image。但问题是这些库以视图大小而不是原始大小下载图像。如果我有一个响应式 HTML div，它会随着窗口大小展开和缩小，我想将该 HTML 转换为原始尺寸的图像。我该怎么做？

【问题讨论】：

标签： javascript html reactjs dom-to-image

【解决方案1】：

如果您想下载具有图像原始尺寸的图像，则只需使用width 和height 作为图像的宽度和高度。如果要下载包含容器尺寸的图像，包括容器中使用的填充，则使用图像元素的clientWidth 和clientHeight 属性。

Refer this link

【讨论】：

图片上有。只有html。我想将 HTML 视图下载为图像。但是 HTML 视图会随着屏幕尺寸的变化而变化。我希望以原始大小下载图像。
这种情况下可以使用canvas元素。您可以通过在画布元素上绘制图像来获取图像的尺寸，然后下载画布上指定大小的图像。如果您需要任何帮助，请参考w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

【解决方案2】：

如果您想下载具有图像原始尺寸的图像，则只需使用宽度和高度作为图像的宽度和高度。如果要下载具有容器尺寸的图像，包括容器中使用的填充，则使用图像元素的 clientWidth 和 clientHeight 属性。将图像编辑为所需的最低像素。

【讨论】：