咱们先拆解下你遇到的这个诡异问题，我之前用html2canvas做类似需求时也踩过几乎一样的坑！

核心原因分两种场景 #

场景1：你把<textarea>本身作为截图目标元素 #

textarea是表单控件，它的核心特性是只显示纯文本，哪怕你强行给它设置innerHTML，浏览器也不会把内容解析成HTML标签——要么直接忽略innerHTML的设置（用value属性显示纯文本），要么把<h2>这类标签当成普通字符串显示。这时候html2canvas捕获的是textarea的控件外观，如果textarea因为内容是纯文本标签导致高度为0（或者你隐藏了它），自然会生成空白图片。

而你直接写固定innerHTML时能正常生成，大概率是测试时误把目标换成了普通容器（比如div），或者浏览器的非标准行为偶然生效了，这不是可靠的用法。

场景2：你用普通容器（比如div）作为截图目标 #

如果目标是div，问题几乎肯定是DOM渲染时机不匹配：当你把textarea的value赋值给div的innerHTML后，浏览器需要一点点时间完成元素的布局、样式计算和重绘，但你立即调用html2canvas，此时浏览器还没完成更新，html2canvas捕获到的是div更新前的空白状态。

而你写固定innerHTML时能正常工作，是因为这个固定字符串的渲染逻辑被浏览器缓存了，或者执行速度更快，刚好赶在截图前完成了渲染。

针对性解决方案 #

针对场景1：换用普通容器作为截图目标 #

不要直接截textarea，而是用一个隐藏的div来承载解析后的HTML，再对这个div截图：

<!-- 新增一个隐藏的容器，用来渲染HTML内容 -->
<div id="render-target" style="position:absolute; left:-9999px; top:-9999px;"></div>
<textarea id="input"></textarea>
<button onclick="takeScreenShot()">to image</button>
<img id="output">

<script>
function takeScreenShot() {
  const input = document.getElementById('input');
  const renderTarget = document.getElementById('render-target');
  
  // 把textarea的内容赋值给隐藏div的innerHTML，让浏览器解析成HTML
  renderTarget.innerHTML = input.value;
  
  // 等待浏览器重绘后再截图
  requestAnimationFrame(() => {
    html2canvas(renderTarget).then(canvas => {
      document.getElementById('output').src = canvas.toDataURL();
    });
  });
}
</script>

针对场景2：等待浏览器重绘后再截图 #

用requestAnimationFrame（最可靠的方式）或者短延迟的setTimeout，确保浏览器完成DOM更新后再调用html2canvas：

function takeScreenShot() {
  const input = document.getElementById('input');
  const target = document.getElementById('target');
  
  target.innerHTML = input.value;
  
  // 等待下一帧重绘完成后执行截图
  requestAnimationFrame(() => {
    html2canvas(target).then(canvas => {
      document.getElementById('output').src = canvas.toDataURL();
    });
  });
}

额外注意事项 #

1. 检查textarea的输入内容：如果用户输入了未闭合的HTML标签（比如<h2>Hi you），浏览器无法正常解析，也会导致容器空白；
2. 确保html2canvas是最新版本：旧版本可能存在动态内容渲染的bug；
3. 不要用display:none隐藏目标容器：html2canvas可能无法捕获完全隐藏的元素，改用position:absolute移到视口外或者visibility:hidden（保留占位）更可靠。

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