1. 参考
  2. 载入
  3. 调用
  4. 使用范例
  5. 不支持的属性
  6. bug
    1. 不显示canvas

html2canvas

JavaScript JavaScript library img

html2canvas使用Promise执行后续操作,需确保Promise在全局作用域没有被覆盖
如需支持旧版浏览器,可提前加载babel polyfill(垫片)

参考

官方文档

载入

载入本地html2canvas代码

1
<script src="html2canvas.min.js"></script>

调用

html2canvas(element).then(function(canv) {do something})
html2canvas(element, set).then(function(canv) {do something})

  • element 需生成截图的js DOM对象
  • set 截图配置选项,可选
  • canv 是一个canvas对象
1
2
3
4
html2canvas(document.body).then(function(canvas) {
    document.body.innerHTML = '';
    document.body.appendChild(canvas);
});

更多设置详见官方文档

使用范例

获取图片

1
2
3
4
5
6
7
html2canvas(document.body).then(function(c) {
    // 用canvas.toDataURL将canvas对象转换为data URI
    var pngData = c.toDataURL("png", 1);
    var imgNode = document.createElement('img');
    imgNode.src = pngData;
    document.body.appendChild(imgNode);
});

下载图片

1
2
3
4
5
6
7
8
9
10
11
html2canvas(document.body).then(function(c) {
    var aNode = document.createElement('a');
    aNode.href = c.toDataURL("png", 1);
    //别忘了设置download属性,否则会报错
    // Not allowed to navigate top frame to data URL
    aNode.download = 'filename';
    //下载文件
    document.body.appendChild(aNode);
    aNode.click();
    aNode.parentNode.removeChild(aNode);
});

不支持的属性

html2canvas的实现原理是获取元素后,在canvas中重新绘制,因此有一定的局限性
暂时不支持部分属性,例如

  • box-shadow
  • filter
  • word-wrap
  • word-break

详细列表见官方文档

bug

不显示canvas

有时html2canvas无法获取画布(canvas)绘制的图形,
可暂时通过设置removeContainer: false解决该问题

1
2
3
4
5
6
html2canvas(document.body, {
    removeContainer: false,
}).then(function(canvas){
    document.body.innerHTML = '';
    document.body.appendChild(canvas);
})

注 版本v1.0.0-alpha.5已修复该bug
详见html2canvas issues