页面显示正常但保存图片输入框偏移，打印预览适配问题排查

问题描述 #

开发的员工ID卡生成代码可正常保存图片至文件夹，但保存的图片中输入框出现向上偏移；页面显示完全正常，仅在保存的图片及打印预览中出现该偏移，且打印预览中图片无法适配纸张。

核心原因 #

1. 父容器尺寸不稳定：.canvasSaveder仅设置width:100%; height:100%，没有明确的高度基准，html2canvas捕获时无法准确计算绝对定位元素的位置，导致偏移。
2. 输入框默认样式干扰：浏览器对input标签有默认的padding、line-height等样式，页面渲染时被隐式抵消，但html2canvas渲染时会保留这些样式，导致定位偏差。
3. 打印样式缺失：直接在新窗口插入图片，未设置打印专属CSS，导致图片无法适配纸张尺寸。

修复步骤 #

1. 稳定父容器尺寸 #

将.canvasSaveder改为使用背景图替代<img>标签，同时设置明确的宽高（匹配ID卡标准尺寸），确保容器尺寸在页面和html2canvas渲染时一致：

.canvasSaveder {
  position: relative;
  width: 330px; /* ID卡标准宽度85.6mm转96dpi像素 */
  height: 210px; /* ID卡标准高度54mm转96dpi像素 */
  background: url('images/kacid.jpg') no-repeat center/contain;
  background-size: 100% 100%;
  margin: 0 auto;
}
/* 移除原img标签的显示 */
.canvasSaveder img {
  display: none;
}

2. 重置输入框默认样式 #

消除浏览器默认样式对定位的影响：

input {
  position: absolute;
  border: none;
  font-size: 30px;
  background-color: transparent;
  padding: 0; /* 重置默认内边距 */
  margin: 0; /* 重置默认外边距 */
  line-height: 1; /* 重置行高 */
  box-sizing: border-box; /* 确保宽高包含内边距和边框 */
  outline: none; /* 移除聚焦边框避免干扰 */
}

3. 优化html2canvas渲染配置 #

添加关键参数提升渲染精度和一致性：

html2canvas(content, {
  scrollX: 0,
  scrollY: 0,
  scale: window.devicePixelRatio, // 适配屏幕分辨率，避免模糊
  useCORS: true, // 处理跨域图片（如果有）
  letterRendering: true, // 提升文字渲染精度
  allowTaint: false
}).then(function(canvas) {
  // 后续保存和打印逻辑不变
});

4. 修复打印适配问题 #

在打印窗口中添加专属CSS，确保图片适配ID卡尺寸：

var mywindow = window.open('', '_blank');
mywindow.document.write(`
  <!DOCTYPE html>
  <html>
  <head>
    <style>
      body { margin: 0; padding: 0; }
      img { 
        max-width: 100vw; 
        max-height: 100vh; 
        object-fit: contain;
      }
      @media print {
        @page {
          size: 85.6mm 54mm; /* 设置打印纸张为ID卡标准尺寸 */
          margin: 0;
        }
        body { margin: 0; }
      }
    </style>
  </head>
  <body>
    <img src="${imageBase64}" />
  </body>
  </html>
`);
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();

额外注意事项 #

• 如果员工照片是动态加载的，需确保图片完全加载后再执行html2canvas捕获，可添加async/await等待加载完成。
• 测试不同浏览器的渲染效果，html2canvas在Chrome和Firefox中的表现略有差异，需微调定位参数。

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