html2canvas一款开源的javascript屏幕截图库，MIT协议

"

简介

html2canvas库允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。目前Github star 17.5K+,可以说非常热门，最新版本1.0.0-rc.3。以上是官网截图：

点击capture按钮效果截图：

工作原理

html2canvas库通过读取DOM以及应用于元素的不同样式，将当前页面呈现为画布图像。它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。但是，由于它严重依赖于浏览器，因此该库不适合在nodejs中使用。它也不会主动地规避任何浏览器内容策略限制，因此对应呈现跨源内容将需要代理来将内容提供给相同的源。

浏览器兼容性

该库应该可以在以下浏览器上正常工作（使用Promisepolyfill）：

• Firefox 3.5+
• 谷歌浏览器
• 歌剧院12+
• IE9 +
• Safari 6+

由于该库需要手动构建每个CSS属性以支持，因此还有一些尚不支持的属性。

目前不支持这些CSS属性:

• background-blend-mode
• border-image
• box-decoration-break
• box-shadow
• filter
• font-variant-ligatures
• mix-blend-mode
• object-fit
• repeating-linear-gradient()
• writing-mode
• zoom

快速上手

安装

npm install html2canvas
import html2canvas from 'html2canvas';

HTML

 
Hello world!

JavaScript

html2canvas(document.querySelector(\"#capture\")).then(canvas => {
 document.body.appendChild(canvas)
});

Tips:

html2canvas(element, options), 具体的option如何配置请详细阅读官方文档。

"

文章来源: https://www.toutiao.com/group/6713513306990051852/