html2canvas生成的画布追加到DIV后无法调整显示尺寸怎么办？

截图始终以原始全宽全高渲染，是两个叠加的机制问题导致的：

• html2canvas生成的canvas是原生替换元素，默认按照自身绑定的位图原始尺寸渲染，不会自动适配父容器的宽高设置
• 原有代码存在冗余DOM操作：既直接向页面body追加了一次全屏尺寸的canvas，又把同一个canvas节点移动到#output容器中，无约束的大尺寸画布会直接撑开页面，导致所有预设的容器尺寸设置失效

• 删除冗余的body追加逻辑
  把代码中document.body.appendChild(canvas);整行移除，这行没有实际业务作用，会在页面底部额外塞入一个全屏尺寸的画布，直接破坏原有布局
• 给canvas元素加显式的显示尺寸约束，不能仅依赖父容器的设置生效
  调整后的核心JS逻辑参考：

  function screenshot() {
    html2canvas(document.body, {
      background: '#fff'
    }).then(function(canvas) {
      // 给canvas设置页面显示样式，不会改动生成的原始位图数据
      canvas.style.width = '100%';
      canvas.style.height = 'auto';
      canvas.style.display = 'block';
  
      // 生成base64字符串填充输入框
      var base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
      console.log(base64URL);
      document.getElementById('screenshot_input').value = base64URL;
      // 将画布追加到指定的输出容器
      document.getElementById('output').appendChild(canvas);
    });
  }
  

• 优化#output容器的样式，避免内容溢出
  将原有容器的内联样式调整为带溢出约束的版本：

  <div id="output" style="width: 100%; max-width: 800px; margin: 20px 0; overflow: hidden;"></div>
  

• 如果需要同步缩小截图的实际位图分辨率（而非仅调整页面上的显示大小），可以在html2canvas的初始化配置中增加scale参数，比如设置scale: 0.5就会把生成的截图整体尺寸缩小为原来的1/2，对应的base64字符串体积也会同步降低
• 之前尝试通过父容器设置、图片缩放逻辑不生效，核心原因是没有给canvas元素本身设置样式约束，仅修改父容器尺寸对原生替换元素无作用

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