1 简介

html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

官网地址

2 安装

2.1 es6 模块化引入方式，项目中使用

npm install --save html2canvas
// 或
yarn add html2canvas

2.2 js直引方式

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

3 使用

基础语法

html2canvas(element, options);

import html2canvas from 'html2canvas';

html2canvas(document.body,{}).then(function(canvas) {
    var imgUrl = canvas.toDataURL();
    //imgUrl即为图片的base64形式
});

4 属性

解决图片清晰度问题

每个设备的window.devicePixelRatio的值不尽一样，想清晰就调高，想压缩大小就调低。但调的越高，图片的生成时间就越长。

html2canvas(document.body,{ scale:1.3 }).then(function(canvas) {
    var imgUrl = canvas.toDataURL();
    //imgUrl即为图片的base64形式
});