需求场景:用户使用浏览器访问引用,突发异常,但没及时保留犯罪现场,线下质控人员为了能复现缺陷可绞尽脑汁,研发团队也是针对场景进行日志分析,链路重放...可是就是没现场。针对这类场景,除了研发团队对前后台链路及参数加上日志追踪外,如果能加上现场操作图,用于帮助定位问题,那就更直观了。于是,问题来了,如何在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的内容后台将无法获取内容?有兴趣的朋友可以先找找解决方案,下回公布比较通用的解决思路。如果您有更好的解决方法,欢迎关注公众号交流。