搭建前端监控系统（六）JS截屏和录屏篇

怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，接口请求，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。当然，这些问题并非不能克服，让我们来一起看看如何去监控并定位线上的问题吧。

这是搭建前端监控系统的第六章，主要是介绍如何使用js进行页面截屏和录屏，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。

===============================================================================

= 开源项目：前端监控系统 --- 只需要简单几步，就可以搭建一套属于自己的前端监控系统，快试试吧。 =

===============================================================================

用户使用App的时候，对于我们开发人员来说，就是一个黑匣子，因为你看不见也摸不着啊。如果用户上报了一个错误，测试人员找到你让你解决，那你就是两眼一抹黑，因为很多线上问题是很难复现的。我问过很多前端工程师，他们的回答都是：如果你没法复现Bug，我怎么去解决这个Bug呢？你咋一想，好像说得很有道理啊，那么，我们有没有一个办法可以解决用户和前端程序员之间的障碍呢？

如果我们能够做到：用户使用我们app的过程中，不再是黑匣子，而是透明的。用户的页面长什么样，他们都做了什么操作，发生了什么错误，我们都能够清晰的知道，那么，再有问题上报的时候，我们就不会再显得那么力不从心了。

一、JS怎么实现截图呢？

如果用户在页面上产生一些特殊行为，比如报错，白屏的时候，我们想看看页面长什么样子的，就可以利用js截屏技术达到我们的目的。这样我们对用户当时的页面有个直观的感受，解决问题的时候也会的得心应手一些。

我们需要用到一个开源库叫 html2Canvas ，这个库的名字，我想大家也是耳熟能详了，毕竟git上辣么多颗星星呢。关于他原理的介绍，有篇文章已经说得很详细了，如何实现web录屏。

既然我们可以对页面进行截图了，那么接下来的问题就是上传了。html2canvas的截图是图片数据，多则大几百Kb, 少则也有个上百Kb, 这么大的流量，对用户端，损耗确实过大。也许未来5G的大时代到了，这点流量根本不算什么，但是现在主要还是4g时代，这样的流量损耗不容忽视。所以我们需要对截图的质量有个选择，以下是我对我的网站进行的截图，分别用了三种压缩方式。

当然因为我的网站不支持手机版，丑了点，这不是重点哈，我主要看数据：

　参数　　　　　　         截图方式一　　　　                截图方式二　　　　               截图方式三


字符串长度                11783　　                       34047 　　                     68111
图片压缩率　　　           72%　　　　　　　                 40%　　　　　　                 0%
截图大小　　　　           23Kb　　　　　　　                66Kb　　　　　                133Kb

综上分析，截图方式一， 压缩率高，虽然截图不是很清晰，但是，也能够看得出，线上用户页面是什么样子的。而且，也解决了，在低端机上截图消耗性能过大的弊端，二十几Kb的流量，也是我们完全能够接受的大小了。由此可见，该方式能够满足我们追踪用户行为的需求了，当然，也可以适当的提高清晰度，以实际情况而定。

那么如何使用html2canvas进行截图呢，代码如下：

/**
     * js处理截图
     */
    this.screenShot = function (cntElem, callback) {
      var shareCOntent= cntElem;//需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = 0.6; //定义任意放大倍数 支持小数
      canvas.style.display = "none";
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
      };
      html2canvas(cntElem, opts).then(function(canvas) {
        var dataURL = canvas.toDataURL();
        var tempCompress = dataURL.replace("data:image/png;base64,", "");
        var compressedDataURL = Base64String.compress(tempCompress);
        callback(compressedDataURL);
      });
    }