html2canvas是一个JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。
html2canvas 一个强大的使用js开发的浏览器网页截图工具https://github.com/niklasvh/html2canvas
star:22.3k
如何安装
使用 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初始布局是可以的，但是不能参与动画类的操作)
