html2canvas使用文档，附赠解决图片不清晰问题办法（非改源码）

ps：想看调高清晰度的直接滑到最下端

资料

html2canvas简介：

该脚本使您可以直接在用户浏览器上拍摄网页或其一部分的“屏幕快照”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图；

html2canvas工作原理：

脚本遍历加载页面的DOM。它收集那里所有元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并没有获取页面的屏幕截图，而是根据它从DOM读取的属性来构建页面的表示形式。结果，它只能正确呈现它理解的属性，这意味着有许多CSS属性无效。有关受支持的CSS属性的完整列表，请查看受支持的功能页面。

html2canvas支持情况：

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Edge
• Safari 6+

快速开始

方式一：es6 模块化引入方式

1.npm或cnpm下载html2canvas包

npm install html2canvas

2.import方式引入

import html2canvas from 'html2canvas';

3.使用

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

方式二：js直引方式

1.引入js或压缩版js

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

或

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

2.使用

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

解决图片清晰度问题

在html2canvas官网上有一个这样的配置项：

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

每个设备的window.devicePixelRatio的值不尽一样，想清晰就调高，想压缩大小就调低。但调的越高，图片的生成时间就越长。
本人多次调试选了一个比较折中的值：scale:1.3

demo:

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