使用html2canvas捕获div时文本被截断的问题解决咨询

我开发了一个捕获指定div并下载为图片的功能，核心代码如下：

JavaScript 代码 #

case "btn-download": {
  html2canvas(document.getElementById("container-image")).then(function (canvas) {
    var a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.download = "New image.png";
    a.click();
  });
  break;
}

HTML 结构 #

<div id="container-image">
  <input id="tab-title" placeholder="Set Title">
</div>

注：原代码中存在标签闭合错误，已修正为正确的input标签写法

CSS 样式 #

#container-image {
  width: fit-content;
  height: fit-content;
  min-height: 20px;
  background-color: rgb(124, 124, 124);
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 5px;
}

#tab-title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  background: none;
  border: none;
  margin-bottom: 10px;
}
#tab-title::placeholder {
  color: rgb(68, 68, 68);
}

页面内显示正常，但下载后的图片中，input的文本顶部被截断，仅缩小字号能临时解决问题，调整padding、margin、line-height均无效。

增大#tab-title的font-size后，使用html2canvas捕获并下载的图片中，文本顶部被截断。尝试调整CSS的padding、margin、line-height等属性均无效，仅缩小字号可暂时规避问题，需要有效修复方案。

针对html2canvas渲染表单元素时的高度计算问题，可尝试以下几种修复方式：

• 给input设置明确的行高与内边距：
  表单元素的默认行高可能无法适配大字号，给input设置大于等于字号的line-height，并添加少量顶部内边距，确保文本有足够的垂直空间：

  #tab-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    background: none;
    border: none;
    margin-bottom: 10px;
    /* 新增样式 */
    line-height: 1.2; /* 或直接设为36px，确保大于font-size */
    padding-top: 2px;
    padding-bottom: 2px;
    box-sizing: border-box;
  }
  

• 确保容器高度足够容纳内容：
  给#container-image移除height: fit-content，改用足够的min-height，或者添加overflow: visible，避免html2canvas捕获时裁剪内容：

  #container-image {
    width: fit-content;
    /* 移除或注释原height属性 */
    min-height: 60px; /* 根据input字号调整足够的最小高度 */
    background-color: rgb(124, 124, 124);
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 5px;
    overflow: visible;
  }
  

• 优化html2canvas渲染配置：
  在调用html2canvas时添加scale参数提高渲染精度，同时确保捕获时无滚动偏移：

  html2canvas(document.getElementById("container-image"), {
    scale: 2, // 提升分辨率，减少渲染裁剪问题
    scrollY: 0 // 确保从顶部开始捕获
  }).then(function (canvas) {
    var a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.download = "New image.png";
    a.click();
  });
  

• 用div模拟输入效果（彻底规避表单元素渲染问题）：
  由于html2canvas对表单元素的渲染兼容性较差，可将input的内容同步到一个视觉一致的div中，捕获这个div生成图片：

  <div id="container-image">
    <input id="tab-title" placeholder="Set Title" oninput="document.getElementById('title-preview').textContent = this.value">
    <div id="title-preview" style="font-size:30px; font-weight:bold; text-align:center; background:none; border:none; margin-bottom:10px;">Set Title</div>
  </div>
  

  捕获时将目标改为document.getElementById('title-preview')，并可隐藏原input（如需），这样能避免表单元素的渲染兼容性问题。

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