【需求】：
最近要实现一个功能，就是页面的存档，基本流程：点击某按钮——截取页面屏幕——保存base64——传参给后台——后台存入数据库——在另一个平台调用数据库内base64——转成png——展示该图片。
【结论说在前】：
根据实际需求，最后采取的是直接向后台传html代码的办法实现的页面存档
var html = $("#id").html();
AjaxtoBG(html);
html2canvas这个方法我到最后也还是有bug的，本文只解决了：
- 图片过大，tomcat拒收，不传后台且不报错问题
- 图片过大，tomcat 报错：Packet for query is too large (12238 > 1024). You can change this value 的问题
- 图片太长了，超过html2canvas能转化的最大长度，采用分块截取的异步问题
html2canvas方法
作为一个前端小菜鸟，收到要求后赶紧百度一下，基本都是html2canvas，于是开始了我一路惨不忍睹的艰辛历程，在此记录，以供后续参考
html2canvas的简单使用
开始并没有考虑周全，所以简单粗暴的用了html2canvas实现，随便查了查参数：
html2canvas(document.querySelector("#"+id),{scale: 1}).then(canvas => {
var base64Url = canvas.toDataURL('image/png');
})
经过简单的测试，感觉没啥问题就提交了，开始测试的时候确实比较顺利，随后我们增加了测试量，也就是增多了页面内容和长度
图片过大，tomcat不理我
结果这个方法出现了问题，当图片很大的时候，后台无法接收base64数据，前台可以看到数据是传递过去了，但是根本没有进入后台接口，tomcat什么反应都没有，也不报错，遂，百度
post请求理论上对参数的大小没有限制，但是服务器有限制，把Tomcat的server.xml里设置一下就好了
注：Tomcat的版本低于等于7，设置maxPostSize="0" 表示post参数无限大
Tomcat的版本大于等于8，设置maxPostSize="104857600" 表示post参数最大100MB
于是，找到我电脑上tomcat9.0的配置文件，做如下修改
<Connector connectionTimeout="8080" protocol="HTTP/1.1" redirectPort="8443" maxPostSize="104857600">
tomcat报错啦：这回是Mysql的锅
完成如上修改之后，再次传一个5M左右的base64数据，tomcat终于有反应了，虽然报错了，但也可歌可泣，根据错误内容：
Packet for query is too large (12238 > 1024). You can change this value
百度之：
MySQL max_allowed_packet 设置过小导致记录写入失败
1、修改配置文件：
可以编辑my.cnf来修改（windows下my.ini）。（mysql安装目录下，my.ini，如果没有这一行可自行添加）
max_allowed_packet = 20M
2、启动 ： Windows net start mysql；
3、停止：Windows net stop mysql；
4、重启Tomcat服务。
终于顺利传参，顺利解析，顺利把base64存到了Mysql数据库，简直喜大普奔，虽然由于图片很大，等待的时间有点长，但这都是小问题，感觉此项目已经终结，人生达到了巅峰！
结果，查看图片的时候，发现存下来的base64转成png后，竟然，最下面有一块是灰色的！！！
举个例子：
- 我本来可使域的窗口高度为1080px
- 需要截图的范围高度是4000px
- base64转化出来的png图片高度确实也是4000px
可惜这4000px只有3800px有内容，剩下的200px是灰色的
经过一系列百度，并没有结果，猜测是图片太长了，超过html2canvas能转化的最大长度，于是进入分块截屏阶段
循环+异步嵌套=回调地狱
将一整个html分割成length个div，每个叫div_i，for循环，将每个base64添加到数组，就行了呗，可惜html2canvas是个异步函数，我的菜鸟生涯对异步了解并不充分，我开始是这么写的：
//失败案例1
var base64Array = new Array();//存放base64数组
for(var i=0;i<length;i++){
var id = "div_"+i;
html2canvas(document.querySelector("#"+id),{scale: 1}).then(canvas => {
var base64Url = canvas.toDataURL('image/png');
base64Array.push(base64Url);
})
}
AjaxtoBG(base64Array);//数组传给后台
嚯，你以为它会乖乖的把满当当的base64Array传给后台么？做梦！它会给你个空的base64Array。。。
异步，就是反应慢半拍，你都传给后台了，它才开始在base64Array里录入值，所以看来传给后台这句话死活不能放在最外面，
于是我把它放到了if(i == length-1)里面，然鹅，这样并不行，调试的时候发现，你想让i等于几它就等于几，所以它总会先进入到AjaxtoBG(base64Array)里面，十分任性了
//失败案例2
for(var i=0;i<length;i++){
var id = "div_"+i;
html2canvas(document.querySelector("#"+id),{scale: 1}).then(canvas => {
var base64Url = canvas.toDataURL('image/png');
base64Array.push(base64Url);
})
if(i == length-1){
AjaxtoBG(base64Array);//数组传给后台
}
}
经过无数次反复百度，又经过promise async await等方法的反复实验之后，我用了最稳妥的回调地狱办法
（注：我只是不太会用promise和 async await的方法，并且懒得尝试了，并不是说这个不好用）
//成功案例
for(var i=0;i<length;i++){
getcanvas(i,callbak1)
function callbak1(base64Url) {//接收回调并go on
base64Array.push(base64Url);
if(base64Array.length==length-1){//最后一个接收完毕，给后台传值
AjaxtoBG(base64Array);
}
}
}
//获取div_i的base64，并回调
function getcanvas(i,callbak1){
var id = "div_"+i;
html2canvas(document.querySelector("#"+id),{scale: 1}).then(canvas => {
var base64Url = canvas.toDataURL('image/png');
callback(base64Url)
})
}
还有一个方法疑似也能成功，但是我不熟悉(function(i){})(i)，所以大概试了一下，最终版本仍然选择了回调地狱形式。
//这个看上去简洁点
for(var i=0;i<length;i++){
(function(i){
var id = "div_"+i;
html2canvas(document.querySelector("#"+id),{scale: 1}).then(canvas => {
var base64Url = canvas.toDataURL('image/png');
base64Array.push(base64Url);
if(base64Array.length==length-1){//最后一个接收完毕，给后台传值
AjaxtoBG(base64Array);
}
})
})(i)
}
本以为这样总算结束了，没想到，测试的时候有同事用手机访问，截出来的竟然有的图片有一小块空白，是个随机概率事件，我也不知道为啥，我想死。。。。
各种失败后我们反思，最终目的其实就是记录访问网页的人进行过的选择，不一定要截图方式啊，直接传给后台一个html页面，另一个平台调用的时候把这个html直接塞进去就行了呗！！！！！！！！！
直接传html
var allhtml = $("#alldiv").html();
AjaxtoBG(allhtml);
ok，I'm fine
