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

2020-12-29 10:30:24 浏览数 (1)

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

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

如何安装 使用 npm or yarn

代码语言:javascript复制
npm install html2canvas
yarn add html2canvas

导入

代码语言:javascript复制
import html2canvas from 'html2canvas'

用法

代码语言:javascript复制
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

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

代码语言:javascript复制
<!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初始布局是可以的,但是不能参与动画类的操作)

0 人点赞