Html2canvas无法渲染文本框内容及下拉选中项问题求助

问题描述 #

使用Html2canvas 1.4.1生成页面截图时，文本框中已输入的内容、下拉菜单的选中项在截图里完全不显示，实际页面中这些内容是正常存在的。

解决步骤 #

1. 手动同步表单值到DOM属性 #

Html2canvas基于DOM节点的属性渲染，但用户在表单控件中输入的内容不会自动同步到元素的value或selected属性。需要在截图前手动把用户输入的值同步到DOM：

// 同步文本输入框、文本域的值到value属性
document.querySelectorAll('input[type="text"], input[type="email"], input[type="password"], textarea').forEach(input => {
  input.setAttribute('value', input.value);
});

// 同步下拉菜单的选中状态到selected属性
document.querySelectorAll('select').forEach(select => {
  Array.from(select.options).forEach(option => {
    option.selected = option.value === select.value;
  });
});

2. 调整Html2canvas配置 #

foreignObjectRendering选项在部分场景下会导致表单控件渲染异常，尝试关闭该选项改用默认渲染方式：

function screenshot() {
  // 先执行表单值同步代码
  document.querySelectorAll('input[type="text"], input[type="email"], input[type="password"], textarea').forEach(input => {
    input.setAttribute('value', input.value);
  });
  document.querySelectorAll('select').forEach(select => {
    Array.from(select.options).forEach(option => {
      option.selected = option.value === select.value;
    });
  });

  html2canvas(document.body, {
    scrollY: -window.scrollY,
    crossOrigin: 'Anonymous',
    allowTaint: true,
    foreignObjectRendering: false // 关闭该选项
  })
  .then(canvas => {
    imageData = canvas.toDataURL();
    console.log('Result from imageData', imageData)
    submissionData = prepData(imageData);
    JFCustomWidget.sendData(submissionData);
  })
  .catch(er => console.error(er));
}

3. 排查CSS样式问题 #

如果使用了自定义表单样式（比如用伪元素、opacity:0隐藏原生控件），Html2canvas可能无法正确识别内容。可以尝试临时移除这些自定义样式后再截图，或者确保原生控件的内容区域处于可见状态。

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