小技巧!H5使用Html2Canvas实现自动截屏

需求场景：用户使用浏览器访问引用，突发异常，但没及时保留现场，线下质控人员为了能复现缺陷可绞尽脑汁，研发团队也是针对场景进行日志分析，链路重放...可是就是没现场。

针对这类场景，除了研发团队对前后台链路及参数加上日志追踪外，如果能加上现场操作图，用于帮助定位问题，那就更直观了。于是，问题来了，如何在html5页面上实现把网页保存为图片。

众所周知，html5中可以使用canvas对象进行动态页面绘制，同时可以操作页面对象，序列化DOM元素等等。

应对方案：采用html2canvas进行网页元素截屏。

1、引入js，https://gitee.com/mirrors/html2canvas

2、使用html2canvas向html中追加新dom，演示代码如下：

html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});

3、把canvas序列化成字符串，通过post请求提交到后台，实现持久化。

​​​​​​​

html2canvas(document.getElementById("target"), {  allowTaint: true, //允许污染  taintTest: true, //在渲染前测试图片(没整明白有啥用)  useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)  background: "#fff",  onrendered: function (canvas) {    imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度    imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传  }

后台接收代码略，通过以上操作可实现前端html保存为图片功能。

 

留一个思考问题，把图片序列化成字符串后，通过请求提交到后台，实际是追加内容到请求里面，普通参数的长度是有限制的，比如tomcat，7.5以下版本默认字符最大是2MB，意味着超过2MB的内容后台将无法获取内容？有兴趣的朋友可以先找找解决方案，下回公布比较通用的解决思路。如果您有更好的解决方法，欢迎关注公众号交流。