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 属性

属性名	默认值	描述
allowTaint	false	是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
backgroundColor	#ffffff	画布背景色（如果未在DOM中指定）。设置null为透明
canvas	null	现有canvas元素用作绘图的基础
foreignObjectRendering	false	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements	(element) => false	谓词功能，可从渲染中删除匹配的元素。
logging	true	启用日志以进行调试
onclone	null	克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
proxy	null	代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	canvas的宽度
height	Element height	canvas的高度
x	Element x-offset	裁剪画布X坐标
y	Element y-offset	裁剪画布y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY	Element scrollY	呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
windowWidth	Window.innerWidth	渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
windowHeight	Window.innerHeight	渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容

解决图片清晰度问题

属性	默认值	描述
scale	window.devicePixelRatio	用于渲染的比例尺。默认为浏览器设备像素比率。

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

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