H5网页利用html2Canvas截图并转化为图片

需求：点击按钮即可把整个网页变成一张图片，以生成长图（截屏），然后可以用来保存或分享等

网上查了很久，发现可以用html2canvas.js和canvas2image.js实现，在实现的过程中，也遇到了各种问题，比如跨域问题，图片不清晰等等，最终还是都解决了

下面贴一下主要方法，也算是做个记录

1. 引入JS

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-alpha1/html2canvas.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/base64.js"></script>

这里注意jquery要先引入，我选择的是2.2.3版本，不同的版本可能会导致截图失败；还有html2canvas.js我用的这个版本亲测没出现问题，其他版本可能会有问题！

2. 点击按钮截图

<script type="text/javascript">
//点击保存长图按钮
$("#savePage").click(function(event){
	/*在截图前可以先修改网页样式，达到想要截图的某些效果*/
	var pic;
    var canvas2 = document.createElement("canvas");
    //根据id获取要截图的节点，如果要截取整个页面，用document.body即可
    let _canvas = document.getElementById("main");
    //获取节点的长宽+padding+border
    var w = parseInt(_canvas.offsetWidth);
    var h = parseInt(_canvas.offsetHeight);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求，对context的参数修改,translate指的是偏移量
    var context = canvas2.getContext("2d");
    context.scale(2,2);
    
	//用html2canvas.js绘制canvas
 	html2canvas(document.getElementById("main"),{
		canvas:canvas2,
        allowTaint:true,//解决跨域问题，建议上传到服务器后测试
        // useCORS: true,
 	}).then(function(canvas) {
 		//绘制canvas后用canvas2image.js和base64.js转化为jpg图片
		pic=canvas;
	    let base64ImgSrc = pic.toDataURL("image/jpeg");//转成png会造成图片太大，加载缓慢，换成jpeg就好很多了
	    let img = document.createElement("img");
	    img.src = base64ImgSrc;
		img.style.width = "100%";
	    document.body.appendChild(img);//直接将图片显示在body中
      });
})
</script>

3. 截图完成