html2canvas 一个强大的使用js开发的浏览器网页截图工具

布满荆棘的人生 2022-12-30 10:55 245阅读 0赞

html2canvas是一个JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

html2canvas 一个强大的使用js开发的浏览器网页截图工具[https://github.com/niklasvh/html2canvas][https_github.com_niklasvh_html2canvas]  
star:22.3k

![62a1bbdc24c08fd38255c2d9e52cae78.png][]

如何安装  
使用 npm or yarn

npm install html2canvas
    yarn add html2canvas

导入

import html2canvas from 'html2canvas'

用法

html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    });

所以一个基本的代码如下：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/html2cancas.js"></script>
      </head>
      <body></body>
      <script>
        html2canvas(document.body).then(function (canvas) {
          document.body.appendChild(canvas)
        })
      </script>
    </html>

实现原理：将需要截图的页面在canvas中进行重绘，这样将页面转换成图片的过程。

注意事项：

不支持iframe  
不支持跨域图片(可以先将线上图片转换成base64，然后用base64作为图片路径)  
不支持flash  
不支持transform、transition过渡、animation动画(备注：transform初始布局是可以的，但是不能参与动画类的操作)

[https_github.com_niklasvh_html2canvas]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fniklasvh%2Fhtml2canvas
[62a1bbdc24c08fd38255c2d9e52cae78.png]: /images/20221120/1a01bf3e5fc54aecad093cfbe44837b3.png