html2canvas截取指定Div出现多余空白 求非表格解决方案

我来帮你搞定这个html2canvas截图出现多余空白的问题！不用嵌套table也能解决，咱们一步步来：

问题原因 #

html2canvas在渲染截图时，会默认按照元素的盒模型尺寸生成画布，而块级元素（比如默认的div）会占满父容器宽度，哪怕内容没那么宽，这就导致多余空白被截进去。之前嵌套table能解决，是因为table布局默认“包裹内容”，咱们用CSS就能实现同样效果，不用依赖table。

解决方案 #

1. 调整目标Div的CSS，让它只包裹内容

给#target添加以下样式，强制它的宽度贴合内容：

#target {
  margin: 0;
  padding: 0;
  width: fit-content; /* 让宽度自适应内容，现代浏览器都支持 */
  /* 如果需要兼容旧浏览器，换成下面这行 */
  /* display: inline-block; vertical-align: top; */
}

这样div就不会占用多余宽度，截图自然就不会有空白了。

2. 配置html2canvas参数，精准指定截图尺寸

在调用html2canvas时，手动传入目标元素的实际宽高，确保画布只渲染内容区域：

function capture() {
  const targetEl = document.getElementById('target');
  $('#target').html2canvas({
    width: targetEl.offsetWidth,  // 取元素实际渲染宽度
    height: targetEl.offsetHeight, // 取元素实际渲染高度
    onrendered: function(canvas) {
      $('#img_val').val(canvas.toDataURL("image/png"));
      document.getElementById("myForm").submit();
    }
  });
}

修改后的完整HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>
<div id="target">
<p class="paragraph">some text </p>
</div>
<input class="save" type="submit" value="save" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<style>
.save { font-size: 20px; }
.paragraph { font-size: 25px; }
#target {
  margin: 0;
  padding: 0;
  width: fit-content;
}
</style>
<script>
function capture() {
  const targetEl = document.getElementById('target');
  $('#target').html2canvas({
    width: targetEl.offsetWidth,
    height: targetEl.offsetHeight,
    onrendered: function(canvas) {
      $('#img_val').val(canvas.toDataURL("image/png"));
      document.getElementById("myForm").submit();
    }
  });
}
</script>

额外提示 #

如果还是有少量空白，可以检查.paragraph的margin/padding，确保段落本身没有多余边距。另外，尽量使用较新版本的html2canvas，旧版本可能存在一些渲染bug。

内容的提问来源于stack exchange，提问作者vickey colors