前端录屏 截屏功能实现方案

LY
1,129 阅读2分钟

录屏实现方案：rrweb.js
官方文档：github.com/rrweb-io/rr…

截屏实现方案：html2canvas.js

官方文档：html2canvas.hertzen.com/

rrweb录屏实现的原理是记录dom的变化，播放的时候重新执行dom操作，所以不支持生成mp4，只可以在web端重放

html2canvas截图实现的原理是生成一个canvas画布，画布的内容是插件帮我们实现好的，我们需要做的是将canvas画布保存成base64图片，保存到本地或者上传

服务端例子：express

需要引入的文件：

rrweb：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>

html2canvas(从官网下载到本地的文件)

<script src="/javascripts/html2canvas.js"></script>

下面用一个例子演示一下跨页面录屏和截屏的效果

前端完整代码如下：

页面1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
    />
  </head>
  <body>
    <!-- 不支持 IE11 以下的浏览器 -->
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
    <script src="/javascripts/html2canvas.js"></script>
    
    <button class="btn">开始录制</button>
    <button class="btn2">结束并播放</button>
    <button class="btn3" id="capture">截图</button>
    <button class="btn4">下一步</button>
    <button class="btn5">清空服务器数据</button>
    <br>
    <br>
    <div>this is page1</div>
    <div>
      <input type="text" placeholder="请输入信息">
    </div>
    <script>
      window.onload = function(){
        let el = document.getElementsByClassName("btn")[0];
        let el2 = document.getElementsByClassName("btn2")[0];
        let el3 = document.getElementById("capture")
        let el4 = document.getElementsByClassName("btn4")[0];
        let el5 = document.getElementsByClassName("btn5")[0];
        let events = []
        let r
        el.onclick = function(){
          alert("开始录制")
          r = rrweb.record({
            emit(event) {
              // 将 event 存入 events 数组中
              events.push(event);
              console.log(events)
            },
          });
        }
        el2.onclick = function(){
          alert("播放")
          r()
          new rrwebPlayer({
                target: document.body, // 可以自定义 DOM 元素
                data: {
                    events,
                },
            });

        }
        el3.onclick = function(){
            html2canvas(document.querySelector("body")).then(canvas => {
                // document.body.appendChild(canvas)
                let pic = canvas.toDataURL("image/png");
                downloadFileByBase64(pic,'金融测试下载')
                // window.location.href = pic;
                
            });
        }
        el4.onclick = function(){
          // console.log(JSON.stringify(events))
          // console.log(events.length)
          uploadEvents(1,events)
          
          return false
         
        }
        el5.onclick = function(){
          // console.log(JSON.stringify(events))
          // console.log(events.length)
          ajax({
            url:'/clearEvents',
            type:'POST',
            dataType:'json',
            data:{},
            // data:{name:1},
            success:function(response,xml){
                //请求成功后执行的代码
              alert(response.msg)
              // console.log(events)
              window.open("/page2.html")
            },
            error:function(status){
              alert(response.msg)
            }
          });
          
          return false
         
        }
        
      }
      // 分批上传
      function uploadEvents(m,events){
        console.log(JSON.stringify(events).length)
        ajax({
            url:'/saveEvents',
            type:'POST',
            dataType:'json',
            data:{events:JSON.stringify(events),page:1},
            // data:{name:1},
            success:function(response,xml){
                //请求成功后执行的代码
              response = JSON.parse(response);
              // console.log(events)
              window.open("/page2.html")
            },
            error:function(status){
              alert(response.msg)
            }
          });
        
      }

      // base64生成图片方法
      function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
      }

        function downloadFile(url,name='What\'s the fuvk'){
            var a = document.createElement("a")
            a.setAttribute("href",url)
            a.setAttribute("download",name)
            a.setAttribute("target","_blank")
            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);  
            a.dispatchEvent(clickEvent);
        }

        function downloadFileByBase64(base64,name){
            var myBlob = dataURLtoBlob(base64)
            var myUrl = URL.createObjectURL(myBlob)
            downloadFile(myUrl,name)
        }
       

        // 原生ajax方法
        function ajax(options){
          var options=options||{};
          options.type=(options.type||'GET').toUpperCase();
          options.dataType=options.dataType||'json';
          var params=formatParams(options.data);

        //创建-第一步
        var xhr;
        //非IE6
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            //ie6及其以下版本浏览器
            xhr=ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收-第三步
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var status=xhr.status;
                if(status>=200&&status<300){
                    options.success&&options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.error&&options.error(status);
                }
            }
        }

        //连接和发送-第二步
        if(options.type=='GET'){
            xhr.open('GET',options.url+'?'+params,true);
            xhr.send(null);
        }else if(options.type=='POST'){
            xhr.open('POST',options.url,true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }

    //格式化参数
    function formatParams(data){
        var arr=[];
        for(var name in data){
            arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
        }
        // arr.push(('v='+Math.random()).replace('.',''));
        return arr.join('&');
    }


// save 函数用于将 events 发送至后端存入，并重置 events 数组
  // function save() {
  //   const body = JSON.stringify({ events });
  //   events = [];
  //   fetch('http://YOUR_BACKEND_API', {
  //     method: 'POST',
  //     headers: {
  //       'Content-Type': 'application/json',
  //     },
  //     body,
  //   });


// 每 10 秒调用一次 save 方法，避免请求过多
// setInterval(save, 10 * 1000);
    </script>
  </body>
</html>

页面2:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
    />
  </head>
  <body>
    <!-- 不支持 IE11 以下的浏览器 -->
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
    <script src="/javascripts/html2canvas.js"></script>
    
    <button class="btn">开始录制2</button>
    <button class="btn2">结束并播放1和2</button>
    <button class="btn3" id="capture">截图2</button>
    <br>
    <br>
    <div>this is page2</div>
    <div>
      <input type="text" placeholder="请输入信息">
    </div>
    <script>
      window.onload = function(){
        let el = document.getElementsByClassName("btn")[0];
        let el2 = document.getElementsByClassName("btn2")[0];
        let el3 = document.getElementById("capture")
        console.log(el)
        let events = []
        let r
        el.onclick = function(){
          alert("开始录制")
          r = rrweb.record({
            emit(event) {
              // 将 event 存入 events 数组中
              events.push(event);
              console.log(events)
            },
          });
        }
        el2.onclick = function(){
          alert("播放")
          
          if(r){
            r()
          }
          
          ajax({
            url:'/saveEvents',
            type:'POST',
            dataType:'json',
            data:{events:JSON.stringify(events),finished:false},
            // data:{name:1},
            success:function(response,xml){
                //请求成功后执行的代码

              // console.log(events)
                ajax({
                    url:'/getEvents',
                    type:'POST',
                    dataType:'json',
                    data:{},
                    success:function(response,xml){
                        //请求成功后执行的代码
                        response = JSON.parse(response);
                        events = response;
                        console.log(response)
                        new rrwebPlayer({
                            target: document.body, // 可以自定义 DOM 元素
                            data: {
                                events,
                            },
                        });
                    },
                    error:function(status){
                    alert(response.msg)
                    }
                });
            },
            error:function(status){
              alert(response.msg)
            }
          });
          
          
        }
        el3.onclick = function(){
            html2canvas(document.querySelector("body")).then(canvas => {
                // document.body.appendChild(canvas)
                let pic = canvas.toDataURL("image/png");
                downloadFileByBase64(pic,'金融测试下载')
                // window.location.href = pic;
                
            });
        }
      }

      function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
      }

        function downloadFile(url,name='What\'s the fuvk'){
            var a = document.createElement("a")
            a.setAttribute("href",url)
            a.setAttribute("download",name)
            a.setAttribute("target","_blank")
            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);  
            a.dispatchEvent(clickEvent);
        }

        function downloadFileByBase64(base64,name){
            var myBlob = dataURLtoBlob(base64)
            var myUrl = URL.createObjectURL(myBlob)
            downloadFile(myUrl,name)
        }
      

        // 原生ajax方法
        function ajax(options){
          var options=options||{};
          options.type=(options.type||'GET').toUpperCase();
          options.dataType=options.dataType||'json';
          var params=formatParams(options.data);

        //创建-第一步
        var xhr;
        //非IE6
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            //ie6及其以下版本浏览器
            xhr=ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收-第三步
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var status=xhr.status;
                if(status>=200&&status<300){
                    options.success&&options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.error&&options.error(status);
                }
            }
        }

        //连接和发送-第二步
        if(options.type=='GET'){
            xhr.open('GET',options.url+'?'+params,true);
            xhr.send(null);
        }else if(options.type=='POST'){
            xhr.open('POST',options.url,true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }

    //格式化参数
    function formatParams(data){
        var arr=[];
        for(var name in data){
            arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
        }
        // arr.push(('v='+Math.random()).replace('.',''));
        return arr.join('&');
    }

// save 函数用于将 events 发送至后端存入，并重置 events 数组
  // function save() {
  //   const body = JSON.stringify({ events });
  //   events = [];
  //   fetch('http://YOUR_BACKEND_API', {
  //     method: 'POST',
  //     headers: {
  //       'Content-Type': 'application/json',
  //     },
  //     body,
  //   });


// 每 10 秒调用一次 save 方法，避免请求过多
// setInterval(save, 10 * 1000);
    </script>
  </body>
</html>

服务端代码：

/*
 * @Author: your name
 * @Date: 2020-07-18 19:09:47
 * @LastEditTime: 2020-07-19 12:24:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /record-2/app.js
 */ 
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var fs = require('fs');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({
  extended:true
}));
let events = [];
// view engine setup
app.use(express.static(path.join(__dirname, 'public')));
// 服务端页面
app.get('/', function(req, res, next) {
    // res.writeHead(200,{'Content-Type':'text/html'})
    fs.readFile('./html/index.html','utf-8',function(err,data){
        if(err){
        throw err ;
        }
        res.send(data);
        });
});
app.get('/page2.html', function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  fs.readFile('./html/page2.html','utf-8',function(err,data){
      if(err){
      throw err ;
      }
      res.send(data);
      });
});
app.post('/clearEvents',function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  console.log(req.body)
  events = [];
  res.send({msg:"操作成功"})
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});
// 存
app.post('/saveEvents',function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  console.log(req.body)
  res.send({state:1,msg:"上传成功"})
  // res.send(req.body.events)
  if(req.body.page==1){
    events = []
  }
  events = events.concat(JSON.parse(req.body.events))
  fs.writeFile("./data.txt",JSON.stringify(req.body.events),'utf-8',function(){
    
  })
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});
// 取
app.post('/getEvents',function(req, res, next) {
  res.send(events);
  // fs.readFile('./data.txt','utf-8',function(err,data){
  //   if(err){
  //     throw err ;
  //   }
  //   console.log(JSON.parse(data))
  //   res.send(data);
  // });
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});

module.exports = app;

上面的例子如果只想在前端看效果的话，只运行第一个页面的前端代码就能查看。

avatar
文章
阅读
粉丝
相关推荐
Chrome下多屏、长页面或者元素截图
20k阅读
 · 
5点赞
JS实现页面截屏功能需求
10k阅读
 · 
28点赞
前后端混合“截屏”方案
2.6k阅读
 · 
16点赞
如何将图片、视频转换为GIF图？想不到这么简单，再也不怕斗图了
373阅读
 · 
0点赞
[译]在浏览器中如何使用JavaScript截图
9.4k阅读
 · 
9点赞
js实现截图功能
983阅读
 · 
1点赞
web页面截图插件
1.8k阅读
 · 
5点赞
使用puppeteer截图及线上问题调试
3.3k阅读
 · 
26点赞
前端仿QQ截图实现Web端自定义截屏(JS版) 插件使用方法
631阅读
 · 
2点赞

友情链接：