前言

在业务需求中，我们经常需要将网页元素转换为图片，以便进行保存、分享或打印等用途。然而，在选择适合的网页截图转换工具时，我们往往会遇到选择困难。HTMLToImage 和 HTML2Canvas 是两个备受关注的 JavaScript 库，它们都具备将 HTML 元素转换为图片的功能，但在具体的使用和功能上有所差异。在本文中，我们将探究 HTMLToImage 和 HTML2Canvas 这两个工具的优缺点，帮助你选择最适合你的业务需求的网页截图转换方案。无论你是初学者还是有一定经验的开发者，希望通过这篇文章，能够为你在网页截图转换方面提供一些有价值的参考和指导。

探究

侧重点区分

HTML2Canvas 和 HTMLToImage 都是用于将 HTML 元素转换为图片的 JavaScript 库，但它们的实现方式和应用场景略有不同。

HTML2Canvas 是一种更为综合的解决方案，它可以将整个 HTML 元素或指定区域的内容转换为 Canvas 元素，并且支持导出成图片格式或生成 PDF 文件。HTML2Canvas 可以捕获 DOM 元素、图像、SVG、Canvas 等，并提供一些选项来定制生成的 Canvas 元素。

HTMLToImage 则是专门用于将指定的 HTML 元素转换为图片的库。它的主要目的是将单个 HTML 元素转换为图片，不支持将整个网页或指定区域转换为图片。HTMLToImage 可以捕获 DOM 元素和 Canvas 元素，然后将其转换为图片格式，例如 JPEG、PNG 等。

总结而言，HTML2Canvas 是一个功能更为强大的库，可以实现比较复杂的截图和导出功能；而 HTMLToImage 则更专注于将单个 HTML 元素转换为图片的简单操作。选择使用哪个库取决于你的具体需求和使用场景

应用场景

就譬如之前写的这篇文章Vue: 用html2canvas复制合成图片到剪贴板^o^避坑版 html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的"截图"。

它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图

但是当你学习了 HTMLToImage 的相关文档后，你会发现，如果我们希望将该图表转换为图片进行保存和分享。使用HTMLToImage，我们可以选择性地将该图表元素转换为图片，并将其保存为PNG或JPEG格式。这个库非常简单易用，只需几行代码即可实现转换。然而，HTMLToImage的局限在于它只能转换单个HTML元素，如果我们需要将整个网页或指定区域的内容转换为图片，就无法满足需求。

实战

实现如上图功能

代码：

HTML 复制代码

<div class="box">
  <div ref="shareImg" class="shareImg">
    <span id="code-img" class="qrcode">
      <div class="qrcode-title">
        <span class="item">
          <a>{{ props.member.name }}</a> 邀请你加入
        </span>
        <span class="item"> {{ props.member.team_name }} </span>
      </div>
      <div class="qr-boxx">
        <qrcode-vue
          :value="link"
          :size="qrCodeSetting.size"
          level="H"
        />
      </div>
      <img class="qr" src="@/assets/member/logo_img_logo@2x.png" />
    </span>
  </div>
</div>

JS 复制代码

const shareImg = ref(null);
const onDownloadQRcode = (down = true) => {
  loading.value = true;
  htmlToImage
    .toPng(shareImg.value)
    .then(async (dataUrl) => {
      if (down) {
        ipcRenderer.invoke("save-base64", dataUrl);
      } else {
        const data = await fetch(dataUrl);
        const blob = await data.blob();
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        MessagePlugin.success(t("zx.contacts.copySuc"));
      }
      loading.value = false;
    })
    .finally(() => {
      // saveStatus.value = false;
      loading.value = false;
    });
  setTimeout(() => {
    loading.value = false;
  }, 5000);
};

这段代码是一个函数onDownloadQRcode，用于将指定的元素转换为图片并进行下载或者复制到剪贴板。

具体解释如下：

loading.value 和 shareImg.value 是两个变量，是在上下文中定义的响应式变量。
htmlToImage.toPng(shareImg.value) 是调用HTMLToImage库的toPng方法将指定的元素转换为PNG图片，shareImg.value 应该是需要转换的HTML元素。
.then(async (dataUrl) => { ... }) 是一个异步回调函数，在成功生成图片的情况下会执行。
如果down参数为true，则使用 ipcRenderer.invoke("save-base64", dataUrl) 来将图片通过IPC Renderer进程传递给主进程，进行下载保存。是一个自定义的Electron功能。
否则，执行以下操作：
- 通过fetch(dataUrl)获取图片数据。
- 将数据转换为Blob对象，使用await data.blob()。
- 使用navigator.clipboard.write()将图片剪贴到剪贴板上。
- 显示一个成功的提示信息，使用 MessagePlugin.success(t("zx.contacts.copySuc"))。这可能是一个自定义的提示插件或组件的使用。
loading.value = false 用于在下载或复制完成后，将loading.value设置为false，表示加载状态结束。
setTimeout(() => { loading.value = false; }, 5000) 是一个定时器，用于在5秒后将loading.value设置为false，以防止长时间加载的情况。

总的来说，这段代码的功能是将指定元素转换为图片，并根据参数选择下载还是复制到剪贴板。同时在操作完成后，更新加载状态的变量。

总结

选择使用HTMLToImage还是HTML2Canvas可以根据以下因素进行考虑：

功能需求：根据具体的需求来选择合适的工具。如果只需要将单个HTML元素转换为图片，而不需要对整个网页进行转换，可以选择HTMLToImage。如果需要捕捉整个网页或指定区域的内容，并将其转换为图片，可以选择HTML2Canvas。
兼容性：考虑目标浏览器的兼容性。HTMLToImage和HTML2Canvas在不同的浏览器中可能有不同的兼容性表现，因此根据需求选择最适合目标浏览器的工具。
性能和质量：HTMLToImage和HTML2Canvas在处理复杂页面时可能会有性能和质量上的差异。HTMLToImage通常对于简单的元素转换效果更好，而HTML2Canvas对于复杂页面和大量元素可能需要更多的调试和优化。
社区支持和文档：查看HTMLToImage和HTML2Canvas的官方文档和社区支持，了解其功能、用法和示例代码。一个活跃的社区和详细的文档可以帮助我们更好地理解和使用工具。

综合考虑以上因素，选择适合自己需求的工具能够在网页截图转换过程中更加高效和便捷。

探索: HTMLToImage和HTML2Canvas：选择最适合你的网页截图转换工具

前言

探究

侧重点区分

应用场景

实战

总结