前端截图工具的巅峰：dom-to-image VS html2canvas

Web截图神器大对决：dom-to-image vs. html2canvas

身为前端开发者，我们时常需要将网页变身图片，这在各式场景都大派用场，例如：

• 生成网页截图
• 制作海报
• 分享到社交媒体

要实现网页截图，不妨试试 JavaScript 和 HTML5 Canvas。而说到截图工具，就有两大热门：dom-to-image 和 html2canvas。它们都能在浏览器中运行，将网页内容变为图片。但别急着选，它们在功能、性能和易用性上有不小的差别。

dom-to-image

dom-to-image 是一款轻量级的截图工具，采用纯 JavaScript 编写。它能将任何 DOM 元素（包括 HTML、SVG、Canvas）转为图片。它的优点在于：

• 轻巧： 体积仅几 KB，不影响网页加载速度。
• 快速： 截图速度极快，即使是复杂的网页也能在毫秒内完成。
• 兼容性广： 与所有现代浏览器兼容，包括 Chrome、Firefox、Safari、Edge 和 IE11。

缺点：

• CSS 属性不支持： 不支持某些 CSS 属性（例如：transform 和 filter）。这意味着如果网页使用了这些属性，可能无法正确截图。
• 跨域截图不行： 不支持跨域截图，无法截取其他网站的网页。

html2canvas

html2canvas 是功能更强大的截图工具，基于 HTML5 Canvas。它能将整个网页（包括 HTML、SVG、Canvas、CSS 样式）转为图片。它的优点在于：

• 功能强大： 能将整个网页转为图片，包括所有元素和样式。
• 跨域截图： 支持跨域截图，可以截取其他网站的网页。
• 自定义截图区域： 可以只截取网页的特定区域。

缺点：

• 体积较大： 体积较大，可能会影响网页加载速度。
• 速度较慢： 截图速度较慢，特别是复杂的网页，可能需要几秒钟才能完成。
• 兼容性较差： 与部分浏览器兼容性较差（例如：IE11 和 Safari）。

dom-to-image vs. html2canvas 对比

特性	dom-to-image	html2canvas
体积	几 KB	几十 KB
速度	非常快	较慢
浏览器兼容性	与所有现代浏览器兼容	与部分浏览器兼容性较差
跨域截图	不支持	支持
自定义截图区域	不支持	支持
CSS 属性支持	不支持某些 CSS 属性	支持所有 CSS 属性

总结

dom-to-image 和 html2canvas 各有优劣。选择哪一个取决于你的需求。如果你需要轻量级、快速、兼容性好的截图工具，dom-to-image 是明智之选。如果你需要功能强大、支持跨域截图、自定义截图区域的截图工具，那么 html2canvas 是更好的选择。

常见问题解答

1. 哪个工具更适合截图复杂网页？

html2canvas 更适合截图复杂网页，因为它支持更多 CSS 属性，并且可以自定义截图区域。

2. 如何截取其他网站的网页？

需要使用 html2canvas，因为它支持跨域截图。

3. 如何只截取网页的特定区域？

只有 html2canvas 可以自定义截图区域。

4. 如何保存截图为图片？

dom-to-image 和 html2canvas 都可以将截图保存为 PNG 或 JPG 等格式的图片。

5. 如何使用代码实现网页截图？

dom-to-image 代码示例：

domtoimage.toJpeg(document.getElementById('my-element')).then(function (dataUrl) {
  // 现在 `dataUrl` 中包含了截图的 base64 编码字符串
});

html2canvas 代码示例：

html2canvas(document.body).then(function(canvas) {
  // 现在 `canvas` 中包含了截图的 Canvas 对象
});