小程序使用html2canvas_小技巧!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, //使用跨域(当allowT