HTML2Canvas 输出空白 PNG？解决问题的妙招

javascript

2024-03-10 16:56:53

HTML2Canvas：将 HTML 导出为 PNG，应对空白输出的妙招

引言

HTML2Canvas 是一个强大的 JavaScript 库，可将 HTML 元素转换为 PNG 图像。然而，一些用户遇到了输出空白 PNG 的问题，而本文将深入探讨这一问题并提供切实可行的解决方案。

问题诊断

HTML2Canvas 输出空白 PNG 的常见原因有：

元素选择不当： 确保准确选择要转换的 HTML 元素，使用 CSS 类或 ID。
按钮干扰： 触发转换操作的按钮应放置在 div 容器之外，以避免干扰转换过程。
定位问题： 容器和子元素应具有绝对定位，以防止图像重叠。

解决方案：优化代码

以下经过优化的代码解决了上述问题：

<div class="e-con-inner">
  <!-- HTML 元素 to be converted to PNG -->
</div>

<button id="download-png" onclick="downloadAllElementsAsPNG()">DOWNLOAD PNG</button>

<script>
function downloadAllElementsAsPNG() {
  const eConInner = document.querySelector('.e-con-inner');
  eConInner.style.position = "absolute";
  for (let child of eConInner.children) {
    child.style.position = "absolute";
  }

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const scale = 2; // Increase this value for higher resolution

  canvas.width = eConInner.clientWidth * scale;
  canvas.height = eConInner.clientHeight * scale;

  const options = {
    scale: scale,
    canvas: canvas,
    logging: false,
    width: eConInner.clientWidth,
    height: eConInner.clientHeight,
    scrollY: -window.scrollY, // Capture entire content
  };

  html2canvas(eConInner, options).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'e-con-inner.png';
    link.click();
  });
}
</script>