使用方法
第一步：html转为canvas；
第二步：canvas转image。
生成图片的清晰度优化方案
将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍）；
最后将canvas的CSS样式width和height设置为原先1倍的大小。
优化策略
更改百分比布局为px布局（如果原先是百分比布局的话）；
关闭canvas默认的抗锯齿设置；
设置模糊元素的width和height为素材原有宽高，然后通过transform: scale进行缩放。这里scale的数值由具体需求决定。
优化解析
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊；
默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化；
除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度，对于DOM中其他的元素也可以使用css样式的scale来实现同样的缩放。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>web实时长图实践</title>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
html,body {width: 100%;}
img {width: 100%;}
</style>
</head>
<body>
<!--
需求：在事件触发时，自动生成一个大事件长图 方案：在浏览器端尝试dom转图片的两种方案：
html2canvas一个在浏览器端通过JS对整个或部分页面进行“截屏”的库。
html2canvas使用方法简单，截屏的核心代码如下：
-->
<button onclick="convert2canvas()">点击按钮将网页保存为图片</button>
<div id="text">
<p>Web开发之用canvas2image.js将canvas保存为图片</p>
<img src="img/html2canvas.png" height="200px" alt="长图">
<p>哈哈哈</p>
<img src="img/html2canvas2.jpg" height="200px" alt="短图">
</div>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function convert2canvas() {
var cntElem = document.getElementById('text'); //
var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
backgroundColor:'#ffffff',
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
//logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true //[重要]开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
//[重要]关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
//[重要]默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
document.body.appendChild(img);
//创建一个a标签
var dlLink = document.createElement('a');
//download 属性规定被下载的超链接目标。
dlLink.download = 'down';
dlLink.href = img.src;
//HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
dlLink.dataset.downloadurl = ["image/jpeg", dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
//自动点击a标签
dlLink.click();
document.body.removeChild(dlLink);
});
}
</script>
</body>
</html>注意：此功能基于html2canvas及Canvas2image插件，页面需要引入此插件。
html2canvas下载地址：http://html2canvas.hertzen.com/
Canvas2image下载地址：https://github.com/hongru/canvas2image