最近发现项目中需要点击按钮保存页面为图片，就是网页截屏，通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。
而html2canvas 能帮助前端实现这一功能：
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<p>我的邀请码</p>
<p>我的邀请码</p>
<p>我的邀请码</p>
<p class="erweima"><a class="down" href="" download="downImg">保存二维码</a></p>
<script>
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
//html2canvas(document.querySelector('div')).then(function(canvas) {
// document.body.appendChild(canvas);
//});
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('html');
//此处可换body，或div等
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w;
canvas2.height = h;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求，对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
// context.scale(2, 2);
html2canvas(document.querySelector('body'), {
canvas: canvas2,
taintTest:true,
useCORS:true,
allowTaint:true
}).then(function(canvas) {
//此处html可换body，或div等
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
</script>
