【需求】：

最近要实现一个功能，就是页面的存档，基本流程：点击某按钮——截取页面屏幕——保存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的配置文件，做如下修改

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 {
        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 {
        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 {
        var base64Url = canvas.toDataURL('image/png');
        callback(base64Url)
    })
}

还有一个方法疑似也能成功，但是我不熟悉(function(i){})(i)，所以大概试了一下，最终版本仍然选择了回调地狱形式。

//这个看上去简洁点
for(var i=0;i {
            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

html2canvas各种问题和简单替代