我之前也踩过html2canvas跨浏览器渲染不一致的坑，尤其是Firefox对某些CSS绘制的元素支持确实偏弱。结合你描述的情况（Chrome正常、Firefox箭头缺失，转base64后问题依旧），咱们可以从以下几个方向排查解决：

可能的原因 #

• 箭头元素的CSS实现方式：如果箭头是用border拼接或者**伪元素(::before/::after)**绘制的，Firefox的渲染逻辑和Chrome存在差异，html2canvas旧版本对这种差异的兼容做得不够好。
• html2canvas配置项缺失：比如没有适配高DPI屏幕、未开启CORS支持，或者硬写的canvas尺寸和元素实际尺寸不匹配，导致Firefox无法正确捕获箭头元素。
• 元素渲染优先级：Firefox对某些定位（如absolute/fixed）或层级较低的元素，可能被html2canvas忽略。

具体解决方案 #

1. 替换箭头的CSS实现为SVG（最稳定的方案） #

html2canvas对SVG的跨浏览器支持远优于CSS绘制的形状，建议把箭头换成inline SVG：

<!-- 替换原来的箭头div -->
<div class="arrow">
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M0 10 L18 10 L12 4 L12 16 Z" fill="#000" />
  </svg>
</div>

这样不管Chrome还是Firefox，html2canvas都能准确捕获到箭头。

2. 调整html2canvas的配置参数 #

修改你的JS代码，补充关键配置并修正尺寸获取方式：

html2canvas(div, {
  canvas: canvas,
  // 用元素实际尺寸代替硬写的固定值，避免尺寸不匹配
  height: div.offsetHeight,
  width: div.offsetWidth,
  // 适配高DPI屏幕，提升渲染精度和兼容性
  scale: window.devicePixelRatio,
  // 开启CORS支持（如果箭头涉及跨域资源）
  useCORS: true,
  // 开启日志，方便查看Firefox中的渲染错误
  logging: true,
  onrendered: function (canvas) {
    m_intSelectedProjectID = parseInt(m_intSelectedProjectID)
    var image = canvas.toDataURL("image/png");
    var l_strBase64 = image.replace('data:image/png;base64,', '');
    var name = 'test'
    // 用JSON.stringify拼接参数，避免字符串拼接的语法错误
    $.ajax({
      type: "POST",
      url: "PTServiceRoutines.aspx/AjaxSaveImageFile",
      data: JSON.stringify({
        buffer: l_strBase64,
        p_intSelectedProjectID: m_intSelectedProjectID,
        p_strViewMode: p_strViewMode
      }),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: successAjaxSaveImageFile,
      failure: failureAjaxSaveImageFile,
      error: errorAjaxSaveImageFile
    });
    return false;
  }
});

3. 修复Firefox的渲染bug #

如果不想修改箭头的CSS，可以给箭头元素添加以下样式，强制Firefox正确渲染：

.arrow-element {
  /* 触发硬件加速，解决Firefox渲染忽略元素的问题 */
  transform: translateZ(0);
  /* 轻微调整透明度，绕过Firefox的渲染优化 */
  opacity: 0.99;
}

4. 升级html2canvas到最新版本 #

旧版本的html2canvas存在大量Firefox兼容性问题，下载最新版本替换现有库后，很多这类渲染问题已经被官方修复。

验证步骤 #

1. 先在本地Firefox中测试修改后的渲染效果，确认箭头正常显示；
2. 再发送base64到服务器生成PDF，因为服务器端的渲染逻辑通常和本地浏览器一致，本地解决后服务器端也会同步修复。

Chrome渲染结果：所有元素（包括箭头div）完整显示
Firefox渲染结果：箭头元素缺失，其他内容正常

内容的提问来源于stack exchange，提问作者Aneeq Azam Khan